/* Themes.
   Light is the default (declared in colors.css / shadows.css on :root).

   Strategy: dark REMAPS the ramps rather than rewriting the semantics — steps
   50–200 become dark tints and 500–900 become light foregrounds, so any component
   written as `background:var(--green-50); color:var(--green-700)` adapts with no
   code change, and "hover moves one step along the ramp" still reads as lighter
   on dark. Surfaces that must stay dark in BOTH themes use --band-* / --on-*.

   Resolution order:
   1. @media (prefers-color-scheme:dark) :root  → auto-detect the device setting
   2. [data-theme="light"]                      → user pinned light (wins, later in source)
   3. [data-theme="dark"]                       → user pinned dark
   theme-toggle.js writes/removes data-theme on <html> and persists to localStorage. */

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
/* Green */
--green-50:#1B2712;--green-100:#223118;--green-200:#33481F;--green-300:#6E9E3E;
--green-400:#7FB047;--green-500:#8FBE58;--green-600:#A3CD73;--green-700:#BBDD95;
--green-800:#D3E9BA;--green-900:#E9F4DC;
/* Sky */
--sky-50:#0E2833;--sky-100:#123543;--sky-200:#1A4E63;--sky-300:#4FB8E0;
--sky-400:#62C6EA;--sky-500:#7DD2F0;--sky-600:#9BDDF4;--sky-700:#BCE9F8;
--sky-800:#D6F2FB;--sky-900:#EBF9FE;
/* Yellow */
--yellow-50:#2E2508;--yellow-100:#3D310B;--yellow-200:#574614;--yellow-300:#C8A317;
--yellow-400:#FECE00;--yellow-500:#FFD933;--yellow-600:#FFE066;--yellow-700:#FFEA99;
--yellow-800:#FFF3C7;--yellow-900:#FFF9E3;
/* Coral */
--coral-50:#2F1310;--coral-100:#3F1915;--coral-200:#5C241D;--coral-300:#D9604B;
--coral-400:#EE6E59;--coral-500:#F2836F;--coral-600:#F59C8B;--coral-700:#F8B8AB;
--coral-800:#FAD2C9;--coral-900:#FCE9E4;
/* Neutrals — inverted, still warm */
--neutral-0:#161614;--neutral-50:#1C1C19;--neutral-100:#232320;--neutral-200:#2E2E2A;
--neutral-300:#3D3D38;--neutral-400:#5E5E57;--neutral-500:#7E7E79;--neutral-600:#A8A8A3;
--neutral-700:#C6C6C1;--neutral-800:#E2E2DE;--neutral-900:#F5F5F3;--neutral-1000:#FCFCFB;
/* Surfaces that must differ from the plain ramp remap */
--surface-card:#21211E;
--surface-sunken:#2A2A26;
--surface-ink:#0E0E0C;
--surface-overlay:rgba(0,0,0,.7);
--surface-glass:rgba(22,22,20,.85);
/* Foregrounds on filled controls go dark, not white */
--text-inverse:#FAFAF9;
--text-on-brand:#14200B;
--text-on-secondary:#0B1A21;
--text-on-accent:#241D00;
--text-on-danger:#2A0F0A;
--text-on-yellow:#241D00;
/* Always-dark bands stay dark; the brand band deepens so white copy still holds */
--band-ink-bg:#0E0E0C;
--band-brand-bg:#2E4A16;
/* Focus needs more presence on a dark field */
--focus-color:#8FD8F5;
--focus-ring:0 0 0 2px #21211E,0 0 0 5px #8FD8F5;
/* Shadows go deeper and lose the warm tint */
--shadow-xs:0 1px 2px rgba(0,0,0,.45);
--shadow-sm:0 2px 6px rgba(0,0,0,.5);
--shadow-md:0 6px 18px rgba(0,0,0,.55);
--shadow-lg:0 14px 34px rgba(0,0,0,.6);
--shadow-xl:0 24px 60px rgba(0,0,0,.66);
--shadow-brand:0 10px 26px rgba(143,190,88,.24);
--shadow-sky:0 10px 26px rgba(98,198,234,.24);
--shadow-inset:inset 0 1px 2px rgba(0,0,0,.5);
}}

[data-theme="light"]{color-scheme:light;
/* Green */
--green-50:#F2F7EA;--green-100:#E1EED0;--green-200:#C6DFA6;--green-300:#A6CC77;
--green-400:#88B750;--green-500:#6C9D30;--green-600:#578026;--green-700:#44631E;
--green-800:#344B17;--green-900:#253611;
/* Sky */
--sky-50:#ECF9FE;--sky-100:#D3F1FC;--sky-200:#A8E4F9;--sky-300:#75D3F4;
--sky-400:#3FBFEE;--sky-500:#1FA5D6;--sky-600:#1585B0;--sky-700:#12688A;
--sky-800:#114F68;--sky-900:#0D3A4C;
/* Yellow */
--yellow-50:#FFFAE5;--yellow-100:#FFF3BF;--yellow-200:#FFE680;--yellow-300:#FEDA40;
--yellow-400:#FECE00;--yellow-500:#E0B300;--yellow-600:#B38E00;--yellow-700:#8A6D00;
--yellow-800:#634E00;--yellow-900:#453600;
/* Coral */
--coral-50:#FEF0EE;--coral-100:#FCDBD6;--coral-200:#F8B4AA;--coral-300:#F28776;
--coral-400:#E8523F;--coral-500:#CE3A28;--coral-600:#A82D1E;--coral-700:#822318;
--coral-800:#5D1911;--coral-900:#3D110B;
/* Neutrals */
--neutral-0:#FFFFFF;--neutral-50:#FAFAF9;--neutral-100:#F3F3F1;--neutral-200:#E6E6E3;
--neutral-300:#D2D2CE;--neutral-400:#ADADA9;--neutral-500:#8C8C89;--neutral-600:#6B6B69;
--neutral-700:#52524F;--neutral-800:#3B3B3A;--neutral-900:#22221F;--neutral-1000:#111111;
/* Surfaces */
--surface-card:#FFFFFF;
--surface-sunken:#F3F3F1;
--surface-ink:#22221F;
--surface-overlay:rgba(34,34,31,.55);
--surface-glass:rgba(255,255,255,.85);
/* Foregrounds on filled controls */
--text-inverse:#FFFFFF;
--text-on-brand:#FFFFFF;
--text-on-secondary:#111111;
--text-on-accent:#111111;
--text-on-danger:#FFFFFF;
--text-on-yellow:#111111;
/* Always-dark bands */
--band-ink-bg:#22221F;
--band-brand-bg:#44631E;
/* Focus */
--focus-color:#12688A;
--focus-ring:0 0 0 2px #FFFFFF,0 0 0 5px #12688A;
/* Shadows */
--shadow-xs:0 1px 2px rgba(34,34,31,.06);
--shadow-sm:0 2px 6px rgba(34,34,31,.07);
--shadow-md:0 6px 18px rgba(34,34,31,.09);
--shadow-lg:0 14px 34px rgba(34,34,31,.11);
--shadow-xl:0 24px 60px rgba(34,34,31,.14);
--shadow-brand:0 10px 26px rgba(108,157,48,.26);
--shadow-sky:0 10px 26px rgba(63,191,238,.28);
--shadow-inset:inset 0 1px 2px rgba(34,34,31,.07);
}

[data-theme="dark"]{color-scheme:dark;
/* Green */
--green-50:#1B2712;--green-100:#223118;--green-200:#33481F;--green-300:#6E9E3E;
--green-400:#7FB047;--green-500:#8FBE58;--green-600:#A3CD73;--green-700:#BBDD95;
--green-800:#D3E9BA;--green-900:#E9F4DC;
/* Sky */
--sky-50:#0E2833;--sky-100:#123543;--sky-200:#1A4E63;--sky-300:#4FB8E0;
--sky-400:#62C6EA;--sky-500:#7DD2F0;--sky-600:#9BDDF4;--sky-700:#BCE9F8;
--sky-800:#D6F2FB;--sky-900:#EBF9FE;
/* Yellow */
--yellow-50:#2E2508;--yellow-100:#3D310B;--yellow-200:#574614;--yellow-300:#C8A317;
--yellow-400:#FECE00;--yellow-500:#FFD933;--yellow-600:#FFE066;--yellow-700:#FFEA99;
--yellow-800:#FFF3C7;--yellow-900:#FFF9E3;
/* Coral */
--coral-50:#2F1310;--coral-100:#3F1915;--coral-200:#5C241D;--coral-300:#D9604B;
--coral-400:#EE6E59;--coral-500:#F2836F;--coral-600:#F59C8B;--coral-700:#F8B8AB;
--coral-800:#FAD2C9;--coral-900:#FCE9E4;
/* Neutrals — inverted, still warm */
--neutral-0:#161614;--neutral-50:#1C1C19;--neutral-100:#232320;--neutral-200:#2E2E2A;
--neutral-300:#3D3D38;--neutral-400:#5E5E57;--neutral-500:#7E7E79;--neutral-600:#A8A8A3;
--neutral-700:#C6C6C1;--neutral-800:#E2E2DE;--neutral-900:#F5F5F3;--neutral-1000:#FCFCFB;
/* Surfaces that must differ from the plain ramp remap */
--surface-card:#21211E;
--surface-sunken:#2A2A26;
--surface-ink:#0E0E0C;
--surface-overlay:rgba(0,0,0,.7);
--surface-glass:rgba(22,22,20,.85);
/* Foregrounds on filled controls go dark, not white */
--text-inverse:#FAFAF9;
--text-on-brand:#14200B;
--text-on-secondary:#0B1A21;
--text-on-accent:#241D00;
--text-on-danger:#2A0F0A;
--text-on-yellow:#241D00;
/* Always-dark bands stay dark; the brand band deepens so white copy still holds */
--band-ink-bg:#0E0E0C;
--band-brand-bg:#2E4A16;
/* Focus needs more presence on a dark field */
--focus-color:#8FD8F5;
--focus-ring:0 0 0 2px #21211E,0 0 0 5px #8FD8F5;
/* Shadows go deeper and lose the warm tint */
--shadow-xs:0 1px 2px rgba(0,0,0,.45);
--shadow-sm:0 2px 6px rgba(0,0,0,.5);
--shadow-md:0 6px 18px rgba(0,0,0,.55);
--shadow-lg:0 14px 34px rgba(0,0,0,.6);
--shadow-xl:0 24px 60px rgba(0,0,0,.66);
--shadow-brand:0 10px 26px rgba(143,190,88,.24);
--shadow-sky:0 10px 26px rgba(98,198,234,.24);
--shadow-inset:inset 0 1px 2px rgba(0,0,0,.5);
}