/* ============================================================
   THEMES — 16 color templates. Each provides ONLY hue/saturation
   anchors + an "ink" hint (text color that sits on a brand fill).
   Designs derive surfaces, neutrals and shadows from these, so
   every theme renders correctly in every design.
   ============================================================ */

[data-theme="indigo"]  { --brand-h:245; --brand-s:80%; --accent-h:282; --accent-s:85%; --brand-ink:#fff; }
[data-theme="emerald"] { --brand-h:158; --brand-s:64%; --accent-h:174; --accent-s:60%; --brand-ink:#06231a; }
[data-theme="crimson"] { --brand-h:349; --brand-s:74%; --accent-h:14;  --accent-s:82%; --brand-ink:#fff; }
[data-theme="sunset"]  { --brand-h:18;  --brand-s:88%; --accent-h:42;  --accent-s:94%; --brand-ink:#2a1300; }
[data-theme="ocean"]   { --brand-h:205; --brand-s:80%; --accent-h:189; --accent-s:74%; --brand-ink:#fff; }
[data-theme="royal"]   { --brand-h:232; --brand-s:70%; --accent-h:264; --accent-s:76%; --brand-ink:#fff; }
[data-theme="forest"]  { --brand-h:142; --brand-s:48%; --accent-h:96;  --accent-s:55%; --brand-ink:#08240f; }
[data-theme="rose"]    { --brand-h:336; --brand-s:78%; --accent-h:300; --accent-s:68%; --brand-ink:#fff; }
[data-theme="amber"]   { --brand-h:38;  --brand-s:92%; --accent-h:26;  --accent-s:88%; --brand-ink:#2a1c00; }
[data-theme="teal"]    { --brand-h:182; --brand-s:62%; --accent-h:166; --accent-s:56%; --brand-ink:#04241f; }
[data-theme="violet"]  { --brand-h:270; --brand-s:74%; --accent-h:296; --accent-s:78%; --brand-ink:#fff; }
[data-theme="slate"]   { --brand-h:214; --brand-s:30%; --accent-h:222; --accent-s:46%; --brand-ink:#fff; }
[data-theme="cherry"]  { --brand-h:2;   --brand-s:76%; --accent-h:330; --accent-s:70%; --brand-ink:#fff; }
[data-theme="lime"]    { --brand-h:86;  --brand-s:64%; --accent-h:68;  --accent-s:70%; --brand-ink:#16210a; }
[data-theme="magenta"] { --brand-h:318; --brand-s:80%; --accent-h:288; --accent-s:78%; --brand-ink:#fff; }
[data-theme="sky"]     { --brand-h:198; --brand-s:86%; --accent-h:172; --accent-s:66%; --brand-ink:#04222b; }

/* the swatch list the UI iterates over (kept in JS too, this is doc) */
:root{ --themes:"indigo emerald crimson sunset ocean royal forest rose amber teal violet slate cherry lime magenta sky"; }