/* Chalkmate — colour themes. <html data-palette="KEY"> (set by PW.setPalette in ui.js, boot in templates/app.php).
   Works with light/dark: each palette only sets a few base colours; everything else is derived below for both modes.
   No data-palette = the original Chalkmate teal (app.css). Loaded after a11y.css so it wins on equal footing. */

/* ---------- Palette base colours: --brand (buttons/accents), --brand-2 (highlights), --tint (page wash), --side-c (sidebar) ---------- */
/* Soft */
:root[data-palette="lavender"]{--brand:#7c5cd6;--brand-2:#b9a4f5;--tint:#a78bfa;--side-c:#41356b;--tl:11%}
:root[data-palette="blossom"]{--brand:#d6457f;--brand-2:#f6a8c8;--tint:#f472b6;--side-c:#5e2846;--tl:9%}
:root[data-palette="sky"]{--brand:#2b86c5;--brand-2:#8fcdf3;--tint:#60b8ee;--side-c:#1f4766;--tl:10%}
:root[data-palette="sage"]{--brand:#4f8a63;--brand-2:#a3cfae;--tint:#86b391;--side-c:#2a4636;--tl:12%}
/* Bold */
:root[data-palette="navy"]{--brand:#1d4ed8;--brand-2:#fbbf24;--tint:#3b5bdb;--side-c:#0b1736;--tl:5%}
:root[data-palette="forest"]{--brand:#15803d;--brand-2:#4ade80;--tint:#166534;--side-c:#0a1c11;--tl:5%}
:root[data-palette="berry"]{--brand:#be185d;--brand-2:#f472b6;--tint:#9d174d;--side-c:#230a18;--tl:5%}
:root[data-palette="ember"]{--brand:#d9480f;--brand-2:#fb923c;--tint:#78716c;--side-c:#18181b;--tl:6%}

/* ---------- Derived — light ---------- */
:root[data-palette]{
  --brand-soft:color-mix(in srgb,var(--brand) 11%,var(--panel));
  --bg:color-mix(in srgb,var(--tint) var(--tl),#f6f7f7);
  --bg-2:color-mix(in srgb,var(--tint) calc(var(--tl) + 4%),#eef0f0);
  --panel:#fff;--panel-2:color-mix(in srgb,var(--tint) 4%,#fff);
  --line:color-mix(in srgb,var(--tint) 16%,#e2e5e5);--line-2:color-mix(in srgb,var(--tint) 10%,#eceeee);
  --hover:color-mix(in srgb,var(--tint) 9%,#f3f5f5);
  --text:color-mix(in srgb,var(--side-c) 35%,#111517);
  --text-2:color-mix(in srgb,var(--side-c) 25%,#4a5354);
  --text-3:color-mix(in srgb,var(--side-c) 20%,#5d6667);
  --side:var(--side-c);--side-2:color-mix(in srgb,#fff 7%,var(--side-c));
  --side-active:color-mix(in srgb,var(--brand) 32%,var(--side-c));
  --side-text:color-mix(in srgb,#fff 84%,var(--side-c));
  --side-muted:color-mix(in srgb,#fff 60%,var(--side-c));
  --ls-planned:var(--brand);
  --a11y-ring:color-mix(in srgb,var(--brand) 70%,#000);
  --sh-1:0 1px 2px color-mix(in srgb,var(--side-c) 6%,transparent),0 1px 1px color-mix(in srgb,var(--side-c) 4%,transparent);
  --sh-2:0 4px 16px color-mix(in srgb,var(--side-c) 9%,transparent),0 1px 3px color-mix(in srgb,var(--side-c) 6%,transparent);
}

/* ---------- Derived — dark ---------- */
:root[data-palette][data-theme="dark"]{
  --bg:color-mix(in srgb,var(--tint) 7%,#0b0d0e);--bg-2:color-mix(in srgb,var(--tint) 8%,#0f1213);
  --panel:color-mix(in srgb,var(--tint) 7%,#121516);--panel-2:color-mix(in srgb,var(--tint) 9%,#161a1b);
  --line:color-mix(in srgb,var(--tint) 16%,#222829);--line-2:color-mix(in srgb,var(--tint) 11%,#1b2021);
  --hover:color-mix(in srgb,var(--tint) 13%,#181d1e);
  --text:color-mix(in srgb,var(--brand-2) 8%,#e8ecec);
  --text-2:color-mix(in srgb,var(--brand-2) 12%,#a5aeae);
  --text-3:color-mix(in srgb,var(--brand-2) 12%,#899292);
  --side:color-mix(in srgb,var(--side-c) 70%,#000);--side-2:color-mix(in srgb,#fff 5%,color-mix(in srgb,var(--side-c) 70%,#000));
  --side-active:color-mix(in srgb,var(--brand) 28%,var(--side-c));
  --a11y-ring:var(--brand-2);
  --sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 6px 20px rgba(0,0,0,.4);
}
/* Navy's gold highlight reads better as the brand blue on light pages. */
:root[data-palette="navy"]:not([data-theme="dark"]) .ls-planned{color:var(--brand-text)}

/* Bits of app.css that used the teal directly. */
:root[data-palette] .toast svg,:root[data-palette] .auth-side li svg{color:var(--brand-2)}
:root[data-palette] .side :focus-visible{outline-color:var(--brand-2)}

/* ---------- Settings → Preferences → Colour theme picker ---------- */
.thm-grp{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:600;margin:14px 0 8px}
.thm-grp:first-child{margin-top:0}
.thm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.thm{display:flex;flex-direction:column;gap:8px;padding:8px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--panel);cursor:pointer;text-align:left;transition:border-color .12s,box-shadow .12s}
.thm:hover{border-color:color-mix(in srgb,var(--text-3) 60%,var(--line))}
.thm.on{border-color:var(--brand-strong,var(--brand));box-shadow:0 0 0 3px var(--focus)}
.thm-pv{display:grid;grid-template-columns:26% 1fr;height:56px;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.06)}
.thm-pv i{background:var(--s)}
.thm-pv span{background:var(--b);display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 9px}
.thm-pv span em{display:block;height:6px;border-radius:3px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.05)}
.thm-pv span em:first-child{width:46%;background:var(--a)}
.thm-pv span em:last-child{width:78%}
.thm-n{display:flex;align-items:center;justify-content:space-between;gap:6px;font-weight:600;font-size:13px;padding:0 2px}
.thm-n svg{width:16px;height:16px;color:var(--brand-text,var(--brand));flex:none}
.thm:not(.on) .thm-n svg{display:none}
@media (max-width:760px){.thm-grid{grid-template-columns:repeat(2,1fr)}}