/* Light theme. Dark values stay as the fallbacks inside each page's own var(--x, ...) usage. */
html.light {
    color-scheme: light;
    --page-bg: #f4f6fb;
    --page-fg: #0f172a;
    --panel-bg: rgba(255, 255, 255, 0.85);
    --panel-border: rgba(15, 23, 42, 0.09);
    --card-bg: rgba(255, 255, 255, 0.92);
    --card-border: rgba(15, 23, 42, 0.09);
    --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    --input-bg: rgba(255, 255, 255, 0.95);
    --input-border: rgba(15, 23, 42, 0.16);
    --grad-text: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #db2777 100%);
    --scroll-track: #eef1f7;
    --scroll-thumb: #cbd5e1;
    --scroll-thumb-hover: #94a3b8;
    --scroll-thumb-soft: rgba(15, 23, 42, 0.2);
    --pop-bg: #ffffff;
    --pop-border: rgba(15, 23, 42, 0.14);
    --pop-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.25);
    --glow-opacity: 0.5;
    --podium-end: rgba(255, 255, 255, 0.92);
    --row-hover: rgba(15, 23, 42, 0.04);
    --roadmap-end: #cbd5e1;
}

/* text-white is the dark theme's headline color and turns dark here; text on saturated surfaces stays white. */
html.light :is(.gradient-bg, .glow-button,
    [class~="from-purple-600"], [class~="from-violet-600"], [class~="from-red-500"],
    [class~="from-amber-500"], [class~="from-amber-400"], [class~="from-orange-500"],
    [class~="bg-violet-600"], [class~="bg-purple-600"], [class~="bg-emerald-600"], [class~="bg-indigo-600"]) .text-white,
html.light :is(.gradient-bg, .glow-button,
    [class~="from-purple-600"], [class~="from-violet-600"], [class~="from-red-500"],
    [class~="from-amber-500"], [class~="from-amber-400"], [class~="from-orange-500"],
    [class~="bg-violet-600"], [class~="bg-purple-600"], [class~="bg-emerald-600"], [class~="bg-indigo-600"]).text-white,
html.light .text-white.hover\:bg-violet-600:hover,
html.light #btn-tab-login.text-white,
html.light #btn-tab-signup.text-white {
    color: #ffffff;
}

/* Theme toggle icons: sun in dark mode, moon in light mode. */
html .theme-icon-moon { display: none; }
html.light .theme-icon-moon { display: block; }
html.light .theme-icon-sun { display: none; }