:root {
    /* 
     * Deep Space Theme Palette 
     * Backgrounds: Rich, dark blues and voids
     */
    --bg-void: #020617;
    /* Slate 950 - Main background */
    --bg-surface: #0f172a;
    /* Slate 900 - Card/Section background */
    --bg-surface-glass: rgba(15, 23, 42, 0.7);
    /* Glass effect */
    --bg-overlay: rgba(2, 6, 23, 0.8);

    /* 
     * Primary Brand Colors 
     * Gradient: Purple to Blue to Cyan
     */
    --primary-500: #6366f1;
    /* Indigo 500 */
    --primary-600: #4f46e5;
    /* Indigo 600 */
    --accent-cyan: #06b6d4;
    /* Cyan 500 - Glows */
    --accent-purple: #8b5cf6;
    /* Violet 500 - Secondary Glows */
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --gradient-glow: linear-gradient(135deg, #06b6d4 0%, #6366f1 50%, #8b5cf6 100%);

    /* 
     * Text Colors 
     * High contrast for readability on dark mode
     */
    --text-primary: #f8fafc;
    /* Slate 50 */
    --text-secondary: #cbd5e1;
    /* Slate 300 */
    --text-muted: #64748b;
    /* Slate 500 */

    /* 
     * Borders & Lines 
     */
    --border-light: rgba(255, 255, 255, 0.1);
    --border-glow: rgba(99, 102, 241, 0.3);

    /* 
     * Spacing & Layout 
     */
    --container-width: 1280px;
    --header-height: 72px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* 
     * Typography Scale
     * Fluid, responsive type system
     */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */
    --text-4xl: 2.25rem;
    /* 36px */
    --text-5xl: 3rem;
    /* 48px */
    --text-hero: 3.5rem;
    /* 56px - Hero title */

    /* 
     * Spacing Scale
     */
    --space-section: 6rem;
    --space-section-sm: 4rem;
    --space-card: 2rem;
    --space-card-sm: 1.25rem;

    /* 
     * Effects 
     */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);
    --blur-glass: 12px;
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Component-specific defaults (Dark Mode) */
    --navbar-bg: rgba(15, 23, 42, 0.5);
    --hero-gradient-start: #1e1b4b;
    --hero-title-gradient: linear-gradient(to right, #fff, #94a3b8);
    --hero-bg-image: url('/images/backgrounds/hero-bg.png');
    --card-hover-border: rgba(255, 255, 255, 0.2);
    --btn-secondary-bg: rgba(255, 255, 255, 0.05);
    --btn-secondary-hover-bg: rgba(255, 255, 255, 0.1);
    --icon-box-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
    --browser-mockup-bg: rgba(15, 23, 42, 0.8);
    --browser-header-bg: rgba(255, 255, 255, 0.03);
    --browser-header-border: rgba(255, 255, 255, 0.05);
    --provider-logo-filter: brightness(0) invert(1);

    /* Providers Section */
    --providers-bg: rgba(2, 6, 23, 0.5);
    --providers-border: rgba(255, 255, 255, 0.05);

    /* Footer */
    --footer-bg: #020617;

    /* Badge */
    --badge-bg: rgba(99, 102, 241, 0.1);
    --badge-color: #06b6d4;
    /* cyan */
    --badge-border: rgba(99, 102, 241, 0.2);

    /* Button borders */
    --btn-secondary-border: rgba(255, 255, 255, 0.25);
}

/* Light Mode Overrides */
:root.light {
    /* Backgrounds */
    --bg-void: #ffffff;
    --bg-surface: #f8fafc;
    --bg-surface-glass: rgba(248, 250, 252, 0.9);
    --bg-overlay: rgba(255, 255, 255, 0.9);

    /* Text */
    --text-primary: #0f172a;
    /* Slate 900 */
    --text-secondary: #475569;
    /* Slate 600 */
    --text-muted: #94a3b8;
    /* Slate 400 */

    /* Borders */
    --border-light: rgba(0, 0, 0, 0.08);
    --border-glow: rgba(99, 102, 241, 0.2);

    /* Shadows - stronger for light mode */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);

    /* Component-specific Light Mode overrides */
    --navbar-bg: rgba(255, 255, 255, 0.8);
    --hero-gradient-start: #e0e7ff;
    /* Indigo 100 */
    --hero-title-gradient: linear-gradient(to right, #1e293b, #475569);
    --hero-bg-image: url('/images/backgrounds/hero-bg-light.png');
    --card-hover-border: rgba(0, 0, 0, 0.15);
    --btn-secondary-bg: rgba(0, 0, 0, 0.03);
    --btn-secondary-hover-bg: rgba(0, 0, 0, 0.06);
    --icon-box-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01));
    --browser-mockup-bg: rgba(248, 250, 252, 0.95);
    --browser-header-bg: rgba(0, 0, 0, 0.02);
    --browser-header-border: rgba(0, 0, 0, 0.05);
    --provider-logo-filter: none;
    /* Show original colors in light mode */

    /* Providers Section - Light Mode */
    --providers-bg: #f1f5f9;
    /* Slate 100 */
    --providers-border: rgba(0, 0, 0, 0.06);

    /* Footer - Light Mode: 与 Providers 保持一致 */
    --footer-bg: #f1f5f9;
    /* Slate 100 */

    /* Badge - Light Mode: 更鲜明的紫色 */
    --badge-bg: rgba(99, 102, 241, 0.12);
    --badge-color: #6366f1;
    /* Indigo 500: 比 cyan 更易读 */
    --badge-border: rgba(99, 102, 241, 0.35);

    /* Button borders - Light Mode: 更明显的边框 */
    --btn-secondary-border: rgba(99, 102, 241, 0.4);
}

/* ========================================
 * Responsive Typography & Spacing
 * ======================================== */

/* Tablet (≤1024px) */
@media (max-width: 1024px) {

    :root,
    :root.light {
        --text-hero: 3rem;
        /* 48px */
        --text-5xl: 2.5rem;
        /* 40px */
        --text-4xl: 2rem;
        /* 32px */
        --space-section: 5rem;
    }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {

    :root,
    :root.light {
        --text-hero: 2rem;
        /* 32px */
        --text-5xl: 1.75rem;
        /* 28px */
        --text-4xl: 1.5rem;
        /* 24px */
        --text-3xl: 1.375rem;
        /* 22px */
        --text-2xl: 1.125rem;
        /* 18px */
        --text-lg: 1rem;
        /* 16px */
        --space-section: 4rem;
        --space-card: 1.5rem;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {

    :root,
    :root.light {
        --text-hero: 1.625rem;
        /* 26px */
        --text-5xl: 1.5rem;
        /* 24px */
        --text-4xl: 1.375rem;
        /* 22px */
        --text-3xl: 1.25rem;
        /* 20px */
        --text-2xl: 1rem;
        /* 16px */
        --space-section: 3rem;
        --space-card: 1.25rem;
    }
}