/* ============================================================================
   THEME · one visual language, two modes. Loaded by pnl.html, login.html and
   connect.html; it declares tokens only, every rule lives with its page.

   There is no theme picker. The product has one look, put together from what
   each of the four directions did best: the shelf-edge label and planogram
   (numbers you read at a glance, products sized by what they sell), the WBR
   binder (the period read against its comparison, notes in the margin), the
   console (panels that never move, hairline seams) and terminal wayfinding (a
   band that says where you are and what to do next). Light is the paper of the
   binder; dark is the console. The switch is light | dark and nothing else.

   --signal is the wayfinding yellow. It marks "act here": the next decisions in
   the band and the talkers hanging on products. It is never a chart colour,
   never a selection, never decoration. If it is on screen, something is waiting.

   The chart palette (--c1 … --c6) is categorical, used in this order and never
   cycled, and both modes pass scripts/validate_palette.js of the dataviz skill
   (lightness band, chroma floor, CVD separation, contrast on --panel). Charts
   never put two scales on one axis; mixed units are small multiples.

   PARITY: both modes declare every token. TestModesDeclareTheSameTokens checks
   it; a token one mode forgets inherits the other's and reads as a bug.
   ========================================================================== */

:root{
  color-scheme:light;
  /* surfaces */
  --bg:#f3f0e8; --panel:#fbfaf6; --sunk:#ece7db; --raise:#ffffff;
  /* ink */
  --ink:#16181d; --text:#22252b; --muted:#5f6670; --faint:#8a9099;
  --line:#dcd5c6; --line-strong:#bdb4a2;
  /* brand */
  --accent:#2f5bd3; --accent-ink:#ffffff; --accent-soft:#e2e8f9;
  /* signal: act here, nothing else */
  --signal:#f2c230; --signal-ink:#1d1700; --signal-soft:#fbefc6;
  /* status */
  --pos:#1d7a4c; --neg:#b4361d; --warn:#946400; --hot:#c4401c;
  /* charts */
  --c1:#2f5bd3; --c2:#c8650f; --c3:#a3366f; --c4:#008f8a; --c5:#6a4fb3; --c6:#6b8f1e;
  --compare:#a2a7ae; --grid:rgba(22,24,29,.08); --provisional:rgba(22,24,29,.06);
  --seq-0:#eef2fb; --seq-1:#d5dff8; --seq-2:#b0c3f1; --seq-3:#829fe5; --seq-4:#5479d7; --seq-5:#2f5bd3; --seq-6:#1d3c97;
  --div-neg:#b4361d; --div-mid:#e9e4da; --div-pos:#1d7a4c;
  /* the names the legacy renderers read */
  --ink-rgb:22,24,29; --accent-rgb:47,91,211;
  --fresh:#d7ecdf; --aged:#f5e6bd; --unsell:#f2d3c8;
  --warn-bg:#fbeedc; --stripe:#e9e3d6; --on-hot:#ffffff; --img-bg:#ffffff;
  --scrim:rgba(14,16,20,.5);
  /* geometry: hairlines, small radii, no drop shadows on the page */
  --radius:6px; --radius-sm:4px;
  --bd:1px; --bd-hair:1px; --bd-strong:1px; --rail:3px;
  --elev-0:none; --elev-1:none; --elev-2:0 1px 2px rgba(14,16,20,.06);
  --elev-3:0 10px 28px rgba(14,16,20,.14); --elev-4:0 18px 44px rgba(14,16,20,.2);
  --elev-neg:none; --elev-muted:none;
  --focus-ring:0 0 0 2px var(--accent);
  --shadow:none;
  --glass-bg:var(--panel); --glass-blur:none; --glass-bd:var(--line); --body-img:none;
  /* type: a condensed face for numbers, a plain one for words */
  --tt:none; --ls-label:.04em; --fw-heavy:650;
  --font-ui:"Public Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-num:"Barlow Condensed","Arial Narrow",ui-sans-serif,system-ui,sans-serif;
  /* shared, not per mode */
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

/* Dark: the console. Declared twice on purpose, once for "follow the system"
   and once for an explicit choice, so a stored "light" always wins. */
@media (prefers-color-scheme:dark){
  :root:not([data-mode="light"]){
    color-scheme:dark;
    --bg:#111316; --panel:#1a1c20; --sunk:#15171a; --raise:#22252a;
    --ink:#eef0f3; --text:#d8dbe0; --muted:#9aa1ab; --faint:#6c727b;
    --line:#2b2f35; --line-strong:#3d424a;
    --accent:#7aa2ff; --accent-ink:#0c1120; --accent-soft:#1c2740;
    --signal:#f2c230; --signal-ink:#1d1700; --signal-soft:#3a3214;
    --pos:#4cc38a; --neg:#ff7a5c; --warn:#e3b341; --hot:#ff7a45;
    --c1:#5c87f5; --c2:#cc7024; --c3:#b0569f; --c4:#1ea383; --c5:#8d72e0; --c6:#928c29;
    --compare:#6c727b; --grid:rgba(238,240,243,.07); --provisional:rgba(238,240,243,.05);
    --seq-0:#1b2133; --seq-1:#222d4d; --seq-2:#2c3d6c; --seq-3:#3b5394; --seq-4:#5272c4; --seq-5:#7a97ea; --seq-6:#a9bdff;
    --div-neg:#ff7a5c; --div-mid:#2a2d33; --div-pos:#4cc38a;
    --ink-rgb:238,240,243; --accent-rgb:122,162,255;
    --fresh:#1f3d30; --aged:#3d3216; --unsell:#45261d;
    --warn-bg:#352a17; --stripe:#202328; --on-hot:#111316; --img-bg:#f4f4f2;
    --scrim:rgba(0,0,0,.62);
    --radius:6px; --radius-sm:4px;
    --bd:1px; --bd-hair:1px; --bd-strong:1px; --rail:3px;
    --elev-0:none; --elev-1:none; --elev-2:0 1px 2px rgba(0,0,0,.3);
    --elev-3:0 10px 28px rgba(0,0,0,.45); --elev-4:0 18px 44px rgba(0,0,0,.55);
    --elev-neg:none; --elev-muted:none;
    --focus-ring:0 0 0 2px var(--accent);
    --shadow:none;
    --glass-bg:var(--panel); --glass-blur:none; --glass-bd:var(--line); --body-img:none;
    --tt:none; --ls-label:.04em; --fw-heavy:650;
    --font-ui:"Public Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    --font-num:"Barlow Condensed","Arial Narrow",ui-sans-serif,system-ui,sans-serif;
  }
}
:root[data-mode="dark"]{
  color-scheme:dark;
  --bg:#111316; --panel:#1a1c20; --sunk:#15171a; --raise:#22252a;
  --ink:#eef0f3; --text:#d8dbe0; --muted:#9aa1ab; --faint:#6c727b;
  --line:#2b2f35; --line-strong:#3d424a;
  --accent:#7aa2ff; --accent-ink:#0c1120; --accent-soft:#1c2740;
  --signal:#f2c230; --signal-ink:#1d1700; --signal-soft:#3a3214;
  --pos:#4cc38a; --neg:#ff7a5c; --warn:#e3b341; --hot:#ff7a45;
  --c1:#5c87f5; --c2:#cc7024; --c3:#b0569f; --c4:#1ea383; --c5:#8d72e0; --c6:#928c29;
  --compare:#6c727b; --grid:rgba(238,240,243,.07); --provisional:rgba(238,240,243,.05);
  --seq-0:#1b2133; --seq-1:#222d4d; --seq-2:#2c3d6c; --seq-3:#3b5394; --seq-4:#5272c4; --seq-5:#7a97ea; --seq-6:#a9bdff;
  --div-neg:#ff7a5c; --div-mid:#2a2d33; --div-pos:#4cc38a;
  --ink-rgb:238,240,243; --accent-rgb:122,162,255;
  --fresh:#1f3d30; --aged:#3d3216; --unsell:#45261d;
  --warn-bg:#352a17; --stripe:#202328; --on-hot:#111316; --img-bg:#f4f4f2;
  --scrim:rgba(0,0,0,.62);
  --radius:6px; --radius-sm:4px;
  --bd:1px; --bd-hair:1px; --bd-strong:1px; --rail:3px;
  --elev-0:none; --elev-1:none; --elev-2:0 1px 2px rgba(0,0,0,.3);
  --elev-3:0 10px 28px rgba(0,0,0,.45); --elev-4:0 18px 44px rgba(0,0,0,.55);
  --elev-neg:none; --elev-muted:none;
  --focus-ring:0 0 0 2px var(--accent);
  --shadow:none;
  --glass-bg:var(--panel); --glass-blur:none; --glass-bd:var(--line); --body-img:none;
  --tt:none; --ls-label:.04em; --fw-heavy:650;
  --font-ui:"Public Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-num:"Barlow Condensed","Arial Narrow",ui-sans-serif,system-ui,sans-serif;
}