/* Generated by scripts/ui/gen_system_theme.py from static/css/base.css.
   Do not edit by hand. No-JS fallback: a stored "system" preference
   follows prefers-color-scheme until theme-init.js resolves it. */
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {

        color-scheme: dark;

        /* Brand ramps - brighten for dark surfaces, keep the hues */
        --color-gold: #FCD34D;
        --color-gold-dark: #F59E0B;
        --color-gold-light: #FDE68A;
        --color-gold-fade: #2A2210;

        --color-emerald: #34D399;
        --color-emerald-dark: #6EE7B7;
        --color-emerald-light: #6EE7B7;
        --color-emerald-fade: #1B3A2B;

        --color-teal: #5EEAD4;
        --color-teal-dark: #99F6E4;
        --color-teal-light: #5EEAD4;
        --color-teal-fade: #13262B;

        --color-coral: #FB7185;
        --color-coral-dark: #FDA4AF;
        --color-coral-light: #FDA4AF;
        --color-coral-fade: #311A1F;

        --color-primary-deep: #A7F3D0;

        /* Mastery - dim to bright as level rises (inverted for dark surfaces) */
        --mastery-0: #74867A;
        --mastery-1: #1F6B4A;
        --mastery-2: #238B5E;
        --mastery-3: #28A86F;
        --mastery-4: #34D399;
        --mastery-5: #6EE7B7;
        --mastery-6: #A7F3D0;
        --mastery-7: #D1FAE5;

        /* Neutral scale - roles reversed (gray-50 = surface, gray-900 = text) */
        --color-bg: #101713;
        --color-bg-warm: #141E18;
        --color-gray-50: #18221C;
        --color-gray-100: #223027;
        --color-gray-200: #2E4034;
        --color-gray-300: #3A4B40;
        --color-gray-400: #809286;
        --color-gray-500: #93A598;
        --color-gray-600: #B0BDB3;
        --color-gray-700: #CBD8CE;
        --color-gray-800: #E4EAE5;
        --color-gray-900: #F5F7F2;

        --color-success: #34D399;
        --color-warning: #FCD34D;
        --color-error: #FB7185;

        /* Semantic theme tokens */
        --surface-canvas: #101713;
        --surface: #18221C;
        --surface-raised: #223027;
        --surface-hover: #26342C;
        --surface-active: #2E4034;
        --tooltip-bg: #223027;
        --tooltip-ink: #F5F7F2;

        --border: #3A4B40;
        --border-strong: #4E6155;
        --border-input: #3A4B40;
        --border-table: #33453A;

        --ink: #F5F7F2;
        --ink-alt: #F5F7F2;
        --ink-muted: #B0BDB3;
        --ink-faint: #93A598;
        --ink-subtle: #84988B;
        --ink-on-light: #F5F7F2;
        --ink-on-accent: #062A1D;
        --ink-on-danger: #3B0A12;
        --chip-contrast-bg: #2E4034;
        --chip-contrast-ink: #F5F7F2;
        --ink-label: #CBD8CE;

        --wash-hover: rgba(255, 255, 255, 0.05);
        --overlay-backdrop: rgba(0, 0, 0, 0.6);
        --switch-track: #3A4B40;
        --switch-track-border: #4E6155;

        --focus-outline: #34D399;
        --focus-ring: rgba(52, 211, 153, 0.28);

        --success-accent: #34D399;
        --success-ink: #6EE7B7;
        --success-ink-deep: #A7F3D0;
        --success-bg: #142A20;
        --success-bg-strong: #1B3A2B;
        --success-border: #25533D;
        --warning-accent: #FCD34D;
        --warning-ink: #FDE68A;
        --warning-ink-on-solid: #1f2937;
        --warning-bg: #2A2210;
        --warning-border: #4D3D17;
        --danger-accent: #FB7185;
        --danger-ink: #FDA4AF;
        --danger-ink-alt: #FB7185;
        --danger-bg: #311A1F;
        --danger-border: #54272F;
        --danger-border-strong: #6E3440;
        --info-accent: #5EEAD4;
        --info-accent-alt: #5EEAD4;
        --info-bg: #13262B;
        --info-border: #1E444B;
        --streak: #FBBF24;

        /* Elevation - deeper neutral shadows on dark surfaces */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.45), 0 10px 10px -5px rgba(0, 0, 0, 0.25);
        --shadow-card: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
        --badge-ring: #18221C;
        --shadow-card-hover: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 24px -16px rgb(0 0 0 / 60%);
        --ink-choice: #E2EAE4;

        /* Alphabet class identity - tinted bands, lifted inks for dark surfaces */
        --alphabet-mid-surface: #14202B;
        --alphabet-mid-ink: #A8C4E8;
        --alphabet-mid-border: #2F4A63;
        --alphabet-high-surface: #142A20;
        --alphabet-high-ink: #8FD9B0;
        --alphabet-high-border: #2E5B45;
        --alphabet-low-surface: #2A2210;
        --alphabet-low-ink: #E0B890;
        --alphabet-low-border: #5A4433;

        /* ========================================
           TAILWIND PALETTE BRIDGE (Evergreen Slate)
           The kit bundle declares its palette as --tw-color-* variables on
           :root (prefix(tw) namespaces theme variables too). Re-pointing them
           here re-themes every tw: utility and @apply component at once.
           Light never declares them, so the light theme keeps Tailwind's
           defaults untouched. Neutral stops follow the surface ramp (50 =
           recessed, 900 = ink); accent stops keep their hue and lift toward
           the dark-legible end of the scale.
           ======================================== */
        --tw-color-white: #18221C;
        --tw-color-slate-50: #223027;
        --tw-color-slate-100: #26342C;
        --tw-color-slate-200: #3A4B40;
        --tw-color-slate-300: #4E6155;
        --tw-color-slate-400: #809286;
        --tw-color-slate-500: #93A598;
        --tw-color-slate-600: #B0BDB3;
        --tw-color-slate-700: #CBD8CE;
        --tw-color-slate-800: #E2EAE4;
        --tw-color-slate-900: #F5F7F2;
        --tw-color-slate-950: #0B100D;
        --tw-color-gray-50: #223027;
        --tw-color-gray-100: #26342C;
        --tw-color-gray-200: #3A4B40;
        --tw-color-gray-300: #4E6155;
        --tw-color-gray-400: #809286;
        --tw-color-gray-500: #93A598;
        --tw-color-gray-600: #B0BDB3;
        --tw-color-gray-700: #CBD8CE;
        --tw-color-gray-900: #F5F7F2;
        --tw-color-emerald-50: #142A20;
        --tw-color-emerald-100: #1A3B2B;
        --tw-color-emerald-200: #2C5A43;
        --tw-color-emerald-300: #6EE7B7;
        --tw-color-emerald-400: #34D399;
        --tw-color-emerald-500: #34D399;
        --tw-color-emerald-600: #34D399;
        --tw-color-emerald-700: #6EE7B7;
        --tw-color-emerald-800: #A7F3D0;
        --tw-color-emerald-900: #A7F3D0;
        --tw-color-amber-50: #2A2210;
        --tw-color-amber-100: #3A2D12;
        --tw-color-amber-200: #D9A437;
        --tw-color-amber-400: #FCD34D;
        --tw-color-amber-500: #FCD34D;
        --tw-color-amber-600: #FCD34D;
        --tw-color-amber-700: #FCD34D;
        --tw-color-amber-800: #FCD34D;
        --tw-color-rose-50: #311A1F;
        --tw-color-rose-100: #3A1F26;
        --tw-color-rose-200: #5A2E37;
        --tw-color-rose-300: #FDA4AF;
        --tw-color-rose-400: #FB7185;
        --tw-color-rose-500: #FB7185;
        --tw-color-rose-600: #FB7185;
        --tw-color-rose-700: #FDA4AF;
        --tw-color-rose-800: #FDA4AF;
        --tw-color-red-100: #311A1F;
        --tw-color-red-600: #FB7185;
        --tw-color-red-700: #FDA4AF;
        --tw-color-red-800: #FECACA;
        --tw-color-sky-50: #13262B;
        --tw-color-sky-100: #18343C;
        --tw-color-sky-200: #3E7A8C;
        --tw-color-sky-500: #38BDF8;
        --tw-color-sky-600: #38BDF8;
        --tw-color-sky-700: #38BDF8;
        --tw-color-sky-800: #7DD3FC;
        --tw-color-sky-900: #BAE6FD;
        --tw-color-teal-700: #5EEAD4;
        --tw-color-teal-900: #5EEAD4;
        --tw-color-orange-600: #FDBA74;
        --tw-color-cyan-50: #122A2E;
        --tw-color-indigo-50: #1E2033;
        --tw-color-indigo-100: #262847;
        --tw-color-indigo-500: #818CF8;
        --tw-color-indigo-600: #818CF8;
        --tw-color-indigo-700: #A5B4FC;
        --tw-color-indigo-800: #A5B4FC;

        /* One-off colors used by kit/page CSS outside the palette */
        --ink-bs-muted: #93A598;
        --chip-ok-bg: #142A20;
        --chip-ok-ink: #A7F3D0;
        --progress-ring: #34D399;
        --heat-l1: #1F6B4A;
        --heat-l2: #28A86F;
        --heat-l3: #34D399;
        --heat-l4: #A7F3D0;
    }
}