/*
 * dark-mode.css
 * 暗黑模式
 * Version 1.0 
 * Last updated: 2025-03-17
 */

/* Default light mode style */
:root {
    --primary: #ef4444;
    --primary-dark: #dc2626;
    --secondary: #f97316;
    --secondary-dark: #ea580c;
    --dark: #1e293b;
    --darker: #0f172a;
    --light: #f8fafc;
    --text-primary: #0f172a;
    --text-secondary: #475569;
}

/* Style when the system is in dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --primary: #f87171;
        --primary-dark: #ef4444;
        --secondary: #fb923c;
        --secondary-dark: #f97316;
        --dark: #f8fafc;
        --darker: #f1f5f9;
        --light: #1e293b;
        --text-primary: #f8fafc;
        --text-secondary: #94a3b8;
    }

    body {
        background-color: var(--light);
        color: var(--dark);
    }

    /* Navbar Dark Mode */
    .navbar {
        background: rgba(30, 41, 59, 0.8);
    }

    .navbar.scrolled {
        background: rgba(30, 41, 59, 0.95);
    }

    .nav-link {
        color: var(--text-primary);
    }

    /* Hero Section Dark Mode */
    .hero {
        background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
    }

    .hero::before {
        background: 
            radial-gradient(circle at 20% 25%, rgba(248, 113, 113, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 75% 75%, rgba(251, 146, 60, 0.15) 0%, transparent 50%);
    }

    .hero-title {
        color: var(--text-primary);
    }

    .hero-title .highlight {
        color: var(--primary);
    }

    /* Visual Cards Dark Mode */
    .visual-card {
        background: rgba(30, 41, 59, 0.4);
    }

    /* Buttons Dark Mode */
    .btn-light {
        background: #334155;
        color: var(--text-primary);
    }

    .btn-light:hover {
        background: #475569;
    }

    /* Cards Dark Mode */
    .service-card {
        background: #1e293b;
        border-color: rgba(248, 250, 252, 0.1);
    }

    .service-card:hover {
        border-color: var(--primary);
    }

    /* Features Section Dark Mode */
    .features {
        background: #0f172a;
    }

    /* Custom Cards Dark Mode */
    .custom-card {
        background: #1e293b;
        border-color: rgba(248, 250, 252, 0.1);
    }

    .custom-card:hover {
        border-color: var(--primary);
    }

    /* Pricing Section Dark Mode */
    .pricing {
        background: var(--light);
        position: relative;
        overflow: hidden;
    }

    .pricing::before {
        content: '';
        position: absolute;
        inset: 0;
        background: 
            radial-gradient(circle at 20% 25%, rgba(239, 68, 68, 0.05) 0%, transparent 50%),
            radial-gradient(circle at 75% 75%, rgba(249, 115, 22, 0.05) 0%, transparent 50%);
        pointer-events: none;
    }

    /* Price Cards Dark Mode */
    .price-card {
        background: rgba(15, 23, 42, 0.9);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .price-card:hover {
        background: rgba(15, 23, 42, 1);
        border-color: var(--primary);
    }

    .price-card.featured {
        background: rgba(15, 23, 42, 1);
        border-color: var(--primary);
    }

    .price-card h3,
    .price-card .price,
    .price-card .price-features {
        color: var(--text-primary);
    }

    .price-card .price-features li {
        color: var(--text-secondary);
    }

    .price-card.featured::before {
        background: var(--primary);
        color: var(--light);
    }

    /* Support Section Dark Mode */
    .support {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        color: var(--text-primary);
    }

    .support-content {
        color: var(--text-primary);
    }

    .support-content p {
        color: var(--text-secondary);
    }

    .support .btn-light {
        background: var(--text-primary);
        color: var(--light);
    }

    .support .btn-light:hover {
        background: var(--text-secondary);
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

    .support .btn-primary {
        background: var(--primary);
        color: var(--text-primary);
    }

    .support .btn-primary:hover {
        background: var(--primary-dark);
    }

    /* Footer Dark Mode */
    .footer {
        background: #020617;
    }

    /* Footer Links */
    .footer-links h3 {
        color: var(--text-primary);  
    }

    .footer-bottom {
        border-top-color: rgba(148, 163, 184, 0.2);
    }

    /* Media Queries for Dark Mode */
    @media (max-width: 768px) {
        .navbar-menu {
            background: rgba(30, 41, 59, 0.95);
        }
    }
}