:root,
[data-theme="dark"] {
    /* ==========================================================================
     SPARCLE PREMIUM DARK — Carbon black + authoritative blue
     Monochromatic blue family. No cyan. No gradient text. Restrained.
     ========================================================================== */

    /* Slate Neutrals — Deep, restrained */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    /* Sparcle Blue — Authoritative, monochromatic family.
       Anchored on blue-600/700 (not the default blue-500) to read serious
       rather than "Tailwind default." */
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;

    /* Cyan kept as legacy variable but no longer the brand accent.
       Reserved for rare data-viz contrast use only. Avoid in marketing. */
    --cyan-400: #22d3ee;
    --cyan-500: #06b6d4;

    /* Dark theme — carbon-near-black, less blue-tinted than slate-950
       so the brand blue reads as the only chromatic note on the page. */
    --bg-body: #06080f;
    --bg-body-gradient: linear-gradient(180deg, #06080f 0%, #0a0f1c 100%);
    --bg-surface: rgba(15, 20, 36, 0.6);
    --bg-surface-solid: #0f1424;
    --bg-surface-glass: rgba(15, 20, 36, 0.7);
    --bg-elevated: rgba(26, 34, 54, 0.82);
    --bg-elevated-rgb: 26, 34, 54;
    --bg-muted: rgba(15, 20, 36, 0.4);

    --text-heading: #ffffff;
    --text-body: #cbd5e1;
    --text-muted: #94a3b8;
    --text-on-primary: #ffffff;

    /* Borders — slightly more restrained than the previous theme */
    --border-default: rgba(148, 163, 184, 0.10);
    --border-strong: rgba(148, 163, 184, 0.22);
    --border-subtle: rgba(255, 255, 255, 0.04);

    /* Brand — single authoritative blue. No cyan accent.
       --brand-accent intentionally aliased to a paler blue (not cyan)
       so any legacy gradient code that consumed it stays in-family. */
    --brand-primary: #2563eb;          /* blue-600 — deeper than the old #3b82f6 */
    --brand-primary-hover: #1d4ed8;    /* blue-700 — darker on hover, not lighter */
    --brand-primary-light: rgba(37, 99, 235, 0.12);
    --brand-accent: #60a5fa;            /* blue-400 — pale blue, NOT cyan */
    --brand-gradient-start: #1d4ed8;   /* same blue family — minimal, monochromatic */
    --brand-gradient-end: #2563eb;

    /* Status colors — kept but desaturated slightly */
    --color-success: #4ade80;
    --color-success-strong: #22c55e;
    --color-success-bg: rgba(22, 163, 74, 0.13);
    --color-danger: #f87171;
    --color-danger-strong: #ef4444;
    --color-danger-bg: rgba(220, 38, 38, 0.10);
    --color-warning: #facc15;
    --color-warning-bg: rgba(234, 179, 8, 0.10);
    --color-info: #60a5fa;             /* re-anchored to blue family */
    --color-info-bg: rgba(96, 165, 250, 0.10);

    /* Shadows — neutral elevation. No colored glow.
       Premium = monochrome shadows; brand color appears via foreground only. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.55);
    --shadow-glow: none;               /* deprecated — use neutral shadows */
    --shadow-glow-strong: none;        /* deprecated */

    /* Layout */
    --container-max: 1280px;
    --nav-height: 80px;
    /* Vertical rhythm tokens for premium consistency.
       --space-section: vertical padding for top-level <section> elements.
       --space-block: spacing between blocks within a section. */
    --space-section: 6rem;
    --space-block: 3rem;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Radii - Softer, more refined */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.75rem;
    --radius-full: 9999px;

    /* Transitions - Smooth and elegant */
    --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================================================================
   LIGHT THEME OVERRIDES
   ================================================================== */
[data-theme="light"] {
    /* Sparcle Premium Light — pure white anchor + deep blue accent.
       Off the previous blue-tinted background; reads more like a serious
       enterprise platform (Anthropic, HashiCorp docs) than a gradient SaaS. */
    --blue-300: #3b82f6;
    --blue-400: #2563eb;
    --blue-500: #1d4ed8;
    --blue-600: #1e40af;
    --blue-700: #1e3a8a;

    /* Cyan deprecated as accent; keep variables defined to avoid breakage,
       but values pushed into the blue family so any leaked usage stays
       monochromatic. */
    --cyan-400: #1d4ed8;
    --cyan-500: #1e3a8a;

    --bg-body: #ffffff;
    --bg-body-gradient: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    --bg-surface: #ffffff;
    --bg-surface-solid: #ffffff;
    --bg-surface-glass: rgba(255, 255, 255, 0.85);
    --bg-elevated: #ffffff;
    --bg-elevated-rgb: 255, 255, 255;
    --bg-muted: #f5f7fa;

    --text-heading: #06080f;            /* near-black */
    --text-body: #1f2937;                /* darker than the previous slate-700 for premium contrast */
    --text-muted: #4b5563;
    --text-on-primary: #ffffff;

    --border-default: rgba(15, 23, 42, 0.10);
    --border-strong: rgba(15, 23, 42, 0.20);
    --border-subtle: rgba(15, 23, 42, 0.06);

    --brand-primary: #1e40af;            /* blue-800 — strong contrast against white */
    --brand-primary-hover: #1e3a8a;     /* darker blue-900 on hover */
    --brand-primary-light: rgba(30, 64, 175, 0.10);
    --brand-accent: #2563eb;             /* blue-600 — pale-er accent in blue family, NOT cyan */
    --brand-gradient-start: #1e40af;    /* monochromatic gradient (same family) */
    --brand-gradient-end: #1d4ed8;

    /* Status colors — light variants */
    --color-success: #166534;
    --color-success-strong: #15803d;
    --color-success-bg: rgba(22, 101, 52, 0.10);
    --color-danger: #b91c1c;
    --color-danger-strong: #dc2626;
    --color-danger-bg: rgba(185, 28, 28, 0.08);
    --color-warning: #a16207;
    --color-warning-bg: rgba(161, 98, 7, 0.08);
    --color-info: #1e40af;
    --color-info-bg: rgba(30, 64, 175, 0.08);

    /* Neutral elevation only — no colored glow. */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);
    --shadow-xl: 0 24px 56px rgba(15, 23, 42, 0.12);
    --shadow-glow: none;                 /* deprecated */
    --shadow-glow-strong: none;          /* deprecated */
}

/* Mobile: tighter nav and section rhythm.
   At 6rem the desktop --space-section reads premium; on phones that's
   ~102px between sections which feels excessive. 4rem (~68px) keeps
   the rhythm without consuming half the viewport. */
@media (max-width: 768px) {
    :root {
        --nav-height: 64px;
        --space-section: 4rem;
        --space-block: 2rem;
    }
}

/* ==================================================================
   LIGHT THEME ACCESSIBILITY TUNING
   Keeps colored text/icons readable on bright surfaces
   ================================================================== */

/* Product switch pills — legible on light backgrounds */
[data-theme="light"] .product-tab-switch {
    background: linear-gradient(135deg, rgba(37,99,235,0.10) 0%, rgba(8,145,178,0.08) 100%);
    border-color: rgba(37,99,235,0.35);
    box-shadow: 0 0 20px -4px rgba(37,99,235,0.18), 0 4px 16px rgba(0,0,0,0.06);
}

[data-theme="light"] .product-tab {
    color: var(--brand-primary, #2563eb);
}

[data-theme="light"] .product-tab:hover {
    color: var(--brand-primary-hover, #1d4ed8);
    background: rgba(37,99,235,0.08);
}

[data-theme="light"] .product-tab.active {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    box-shadow: 0 2px 10px rgba(37,99,235,0.35);
}

[data-theme="light"] .save-badge {
    color: #166534;
    border-color: rgba(22, 101, 52, 0.35);
    background: rgba(34, 197, 94, 0.16);
}

[data-theme="light"] .check,
[data-theme="light"] .plan-features li::before,
[data-theme="light"] .compare-card .compare-strength {
    color: #166534;
}

[data-theme="light"] .compare-card .compare-limit {
    color: #b91c1c;
}

[data-theme="light"] .research-table .highlight-cell,
[data-theme="light"] .roi-table thead th,
[data-theme="light"] .section-label,
[data-theme="light"] .research-hero-label {
    color: #1e40af;
}

[data-theme="light"] .finding-card-icon svg,
[data-theme="light"] .research-meta-item svg,
[data-theme="light"] .stat-icon svg {
    color: #1e40af;
}

/* Override inline red/green text used in research outcome cards */
[data-theme="light"] .research-content [style*="#4ade80"] {
    color: #166534 !important;
}

[data-theme="light"] .research-content [style*="#f87171"] {
    color: #b91c1c !important;
}

[data-theme="light"] .research-content [style*="rgba(74,222,128,0.1)"] {
    background: rgba(22, 101, 52, 0.14) !important;
}

[data-theme="light"] .research-content [style*="rgba(248,113,113,0.1)"] {
    background: rgba(185, 28, 28, 0.12) !important;
}

/* Light mode overrides for specific sections */
[data-theme="light"] .section-cta {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
}

[data-theme="light"] .cta-box h2 {
    color: white;
}

[data-theme="light"] .cta-box p {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .cta-resources {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .cta-resources a {
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .section-cta .btn-primary {
    background: white;
    color: #1d4ed8;
}

[data-theme="light"] .section-cta::before {
    background: radial-gradient(circle at 50% 50%, rgba(29, 78, 216, 0.3) 0%, rgba(30, 64, 175, 0.1) 70%);
}

[data-theme="light"] .hero-video-info {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
}

[data-theme="light"] .stat-icon {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
}

[data-theme="light"] .footer {
    background: #e8eff9;
}

[data-theme="light"] .footer-sources {
    background: #dbe6f5;
}