/* shared/schemes.css — selectable colour schemes.

   Hues come from the Flat UI family already adopted in the SLZ design system, with the
   light/dark compensated pairs that family ships. Two rules are obeyed per scheme:

   --brand        the FILL behind a label. Chosen dark enough that --on-brand clears AA.
   --brand-bright the vibrant hue. Accents, active states, focus rings - never a label bed.
   --on-brand     computed per scheme, not assumed. Gold forces dark text; the rest take white.

   The token names stay semantic. "Charcoal" is a label a vendor reads, never a token. */

:root[data-scheme="gold"], :root:not([data-scheme]) {
  --brand: #C9A227; --brand-bright: #D4AF37; --brand-strong: #8A6D1F;
  --brand-soft: #FBF4DE; --on-brand: #16150F;
}
:root[data-scheme="blue"] {
  --brand: #2F6FBF; --brand-bright: #4A89DC; --brand-strong: #2A5E9E;
  --brand-soft: #E9F1FC; --on-brand: #FFFFFF;
}
:root[data-scheme="teal"] {
  --brand: #1F7A66; --brand-bright: #37BC9B; --brand-strong: #1B6857;
  --brand-soft: #E4F6F1; --on-brand: #FFFFFF;
}
:root[data-scheme="green"] {
  --brand: #4E7A2A; --brand-bright: #8CC152; --brand-strong: #446B25;
  --brand-soft: #EEF7E4; --on-brand: #FFFFFF;
}
:root[data-scheme="purple"] {
  --brand: #5E479B; --brand-bright: #967BDC; --brand-strong: #523E88;
  --brand-soft: #F0EBFB; --on-brand: #FFFFFF;
}
:root[data-scheme="pink"] {
  --brand: #97417A; --brand-bright: #D772AD; --brand-strong: #843869;
  --brand-soft: #FBEBF4; --on-brand: #FFFFFF;
}
:root[data-scheme="charcoal"] {
  --brand: #434A54; --brand-bright: #656D78; --brand-strong: #383E47;
  --brand-soft: #EDEFF2; --on-brand: #FFFFFF;
}

/* dark mode: soft tints and text-safe steps are compensated, brand fills hold */
:root[data-theme="dark"][data-scheme="blue"]     { --brand-soft: #14243A; --brand-strong: #7FB0E8; }
:root[data-theme="dark"][data-scheme="teal"]     { --brand-soft: #0F2A24; --brand-strong: #5FD4B7; }
:root[data-theme="dark"][data-scheme="green"]    { --brand-soft: #1A2612; --brand-strong: #A8D97A; }
:root[data-theme="dark"][data-scheme="purple"]   { --brand-soft: #211A38; --brand-strong: #B7A2E8; }
:root[data-theme="dark"][data-scheme="pink"]     { --brand-soft: #2E1526; --brand-strong: #E79AC6; }
:root[data-theme="dark"][data-scheme="charcoal"] { --brand-soft: #23262B; --brand-strong: #A7AEB8; }

/* the door keeps the scheme so the brand still greets you at the entrance */
:root[data-scheme="charcoal"] { --shell: #1B1E22; --shell-2: #2A2F36; --on-shell: #C7CDD6; }
:root[data-scheme="blue"]     { --shell: #12203A; --shell-2: #1B3255; --on-shell: #BBD3F2; }
:root[data-scheme="teal"]     { --shell: #0E2621; --shell-2: #163B33; --on-shell: #A9E3D3; }
:root[data-scheme="green"]    { --shell: #17240F; --shell-2: #24391A; --on-shell: #C6E3A6; }
:root[data-scheme="purple"]   { --shell: #1B1630; --shell-2: #2A2249; --on-shell: #CBBCF0; }
:root[data-scheme="pink"]     { --shell: #2A1220; --shell-2: #431D33; --on-shell: #F0B9D8; }

/* swatch used in the picker */
.scheme-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:10px; margin-top:8px; }
.scheme-chip { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:10px 6px; min-height:76px;
  background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-sm); cursor:pointer;
  font-size:12px; font-weight:700; color:var(--ink); }
.scheme-chip.on { border-color:var(--brand); background:var(--brand-soft); }
.scheme-dot { width:26px; height:26px; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }