/* ================================================================================
   The MPS palette. ONE definition, three consumers: static/app.css (the console),
   static/auth/auth.css (the sign-in pages) and static/setup.html (the wizard).

   It used to be three copies, and they drifted. --purple-ink — purple as TEXT on the
   page ground, which dark has to lift to #b98be4 because the brand purple measures
   2.56:1 there — reached two of the three, so the wizard's h1 and step headings sat at
   2.33-2.56:1 in dark. --line had gone 1 step apart between the wizard and the other
   two. A copy is a promise to update three files; this is the file.

   Served by bin/api.py at /tokens.css WITHOUT a session, because the sign-in pages are
   rendered before there is one and they carry the same brand. A palette discloses
   nothing — unlike app.css's siblings, which name every endpoint the console calls, and
   which is why /static/* is behind the session and this is not.

   Anything page-specific stays in the page's own sheet. auth.css keeps --sh-card for
   exactly that reason: its card floats on a purple gradient and needs a lighter drop
   than the console's modal scrim, and two roles should not share one name.

   bin/test_ui.py resolves every var() in all three consumers against this file. A token
   used anywhere and defined nowhere, or defined for dark only, fails the build.
   ================================================================================ */

/* MPS tokens, same family as landing/index.html — no webfont, no CDN, no framework. */
:root {
  --purple: #470575; --purple-d: #33044f; --purple-l: #7a3fa8; --purple-t: #f6f1fb;
  /* Purple as TEXT on the page ground. In light it is the brand purple; in dark the brand
     purple measures 2.56:1 and stops being readable, so the role gets its own token rather
     than every rule choosing a step by hand. */
  --purple-ink: #470575;
  --cyan: #0078AA; --cyan-t: #eaf6fb;
  --amber: #A66A13; --amber-t: #fdf6ea;
  --err: #C0392B;  --err-t: #fdeceb;
  --green: #1F7A4D; --green-t: #eaf7f0;
  /* -ink: one step darker again, for small text on that hue's OWN tint. --cyan and
     --amber were derived against white and clear 4.5:1 there, but only 4.47 and 4.17
     on --cyan-t / --amber-t — which is exactly where the state pills put them. */
  --cyan-ink: #0072A2; --amber-ink: #955F11;
  /* The tint borders, previously eight literals inline in the pill and button rules. */
  --cyan-line: #b9dced; --amber-line: #e8d3ae;
  --purple-line: #ddc7ec; --err-line: #edc7c2;
  /* The three literals the audit found outside the token layer, named rather than
     scattered. --green-line completes the tint/line pair every other hue already had;
     --edge is the graph's "no meaning of its own" connector, darkened from the #c9ccd6 it
     shipped at (1.60:1) to clear the 3:1 that WCAG 1.4.11 asks of a graphic you must read;
     --on-purple-accent is the header wordmark's dot. */
  --green-line: #b6ddc8; --edge: #8d92a3; --on-purple-accent: #d9b8f2;
  /* The brand bar's lightest stop, and deliberately NOT --purple-l. --purple-l is the
     lifted step for text ON a dark ground and the dark theme takes it to #b98be4; used
     as the bar's end that put pure white at 2.54:1 and rgba(255,255,255,.9) at 3.00:1
     over the right-hand third, where #whoami and Sign out sit. One value for both
     themes, because the bar is an inverted surface in both. */
  --header-end: #7a3fa8;
  /* The -safe steps: a hue dark enough to read as a 1.3px line on the page ground. The dark
     theme defined them and :root did not, so `stroke: var(--cyan-safe)` was invalid at
     computed-value time in LIGHT mode — stroke is inherited, so it fell back to none and
     every branch, join, route and resume edge disappeared. That is why the probe fan-out,
     the fan-in to inv.synthesise and every router's outcomes showed as arrowheads attached
     to nothing. Derived against white, same as --cyan / --amber. */
  --cyan-safe: #0078AA; --amber-safe: #A66A13;
  /* The inverted surface — console blocks and the toast stack. A dark ground needs the
     light end of each hue, and this is the first place the palette has needed one.
     The toast accents used to be a second green and a second red with no relationship
     to --green / --err; these are named as what they are. */
  --console: #16161a; --console-fg: #e8e8ea;
  --cyan-inv: #4fbdeb; --green-inv: #3ecf8e; --err-inv: #ff6b5b; --amber-inv: #f0b429;
  --scrim: rgba(20,10,28,.5);
  --ink: #16161a; --ink2: #3a3f4b; --muted: #5f6570;
  --line: #e4e5ea; --line2: #eff0f4; --panel: #fafafb; --bg: #fff;
  --r: 10px; --r-sm: 7px;
  --hist-w: 272px;   /* sidebar width; chat.js overrides it on #histpane once dragged */
  --sh: 0 1px 2px rgba(20,10,28,.05), 0 1px 3px rgba(20,10,28,.06);
  --sh-md: 0 4px 14px rgba(20,10,28,.10);
  --sh-lg: 0 18px 60px rgba(20,10,28,.35);
  color-scheme: light dark;
}
/* ---- dark theme --------------------------------------------------------------
   DESIGN.md carried this as a Known gap: the Instrument dialect was light-only while the
   Print dialect shipped dark both ways. It is a token swap and nothing else — every rule
   below this block already referenced tokens rather than hex, which is what the gap note
   asked new work to preserve.

   Three states, in the order a browser resolves them: the light palette on bare :root, the
   system preference guarded so an explicit light choice wins, then the explicit dark choice
   so a toggle beats the system in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  /* Ground and ink. Cool, because the Instrument dialect's ink is cool; the console block
     goes darker still so an inverted surface stays inverted against a dark page. */
  --bg: #1a1a20; --panel: #22222a; --console: #0e0e12; --console-fg: #e8e8ea;
  --ink: #ecedf1; --ink2: #c6c9d3; --muted: #9ba0ac;
  --line: #303039; --line2: #26262e;
  /* The Inverted-Surface Rule, applied to a whole theme: every hue takes its -inverted step,
     and the -ink steps (small text on that hue's own tint) become the inverted step too,
     because in dark the tint IS the dark surface. */
  --cyan: #4fbdeb; --cyan-ink: #4fbdeb; --cyan-t: #0c2a38; --cyan-line: #2b6a86;
  --amber: #f0b429; --amber-ink: #f0b429; --amber-t: #33250f; --amber-line: #7a5c1f;
  /* The -safe steps were derived against WHITE and were the one pair this theme forgot.
     On the dark ground they measure 3.5 and 3.9 to 1 — over the graphic minimum on paper,
     and invisible in practice as a 1.3px dashed line, which is why the router fans looked
     like arrowheads attached to nothing. The Inverted-Surface Rule already says every hue
     on a dark ground takes its inverted step; these are no exception. */
  --cyan-safe: #4fbdeb; --amber-safe: #f0b429;
  --err: #ff6b5b; --err-t: #331815; --err-line: #7a3b33;
  --green: #3ecf8e; --green-t: #0f2a1f; --green-line: #2a6b4d;
  /* Purple is structure, and structure has to separate from a violet-leaning dark ground:
     the fills keep the brand hue, anything that has to be READ takes the lifted step. This
     is the same inversion the Print dialect's dark theme already makes. */
  --purple: #7a3fa8; --purple-d: #33044f; --purple-l: #b98be4; --purple-t: #241536;
  --purple-ink: #b98be4;
  --purple-line: #5b3a7e; --on-purple-accent: #d9b8f2;
  --edge: #6c7284;
  --scrim: rgba(0,0,0,.62);
  /* A shadow on a dark ground reads as almost nothing; these lean on the black harder so
     the three elevation tiers still mean what they meant. */
  --sh: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.32);
  --sh-md: 0 4px 14px rgba(0,0,0,.46);
  --sh-lg: 0 18px 60px rgba(0,0,0,.62);
  }
}
:root[data-theme="dark"] {
  /* Ground and ink. Cool, because the Instrument dialect's ink is cool; the console block
     goes darker still so an inverted surface stays inverted against a dark page. */
  --bg: #1a1a20; --panel: #22222a; --console: #0e0e12; --console-fg: #e8e8ea;
  --ink: #ecedf1; --ink2: #c6c9d3; --muted: #9ba0ac;
  --line: #303039; --line2: #26262e;
  /* The Inverted-Surface Rule, applied to a whole theme: every hue takes its -inverted step,
     and the -ink steps (small text on that hue's own tint) become the inverted step too,
     because in dark the tint IS the dark surface. */
  --cyan: #4fbdeb; --cyan-ink: #4fbdeb; --cyan-t: #0c2a38; --cyan-line: #2b6a86;
  --amber: #f0b429; --amber-ink: #f0b429; --amber-t: #33250f; --amber-line: #7a5c1f;
  /* The -safe steps were derived against WHITE and were the one pair this theme forgot.
     On the dark ground they measure 3.5 and 3.9 to 1 — over the graphic minimum on paper,
     and invisible in practice as a 1.3px dashed line, which is why the router fans looked
     like arrowheads attached to nothing. The Inverted-Surface Rule already says every hue
     on a dark ground takes its inverted step; these are no exception. */
  --cyan-safe: #4fbdeb; --amber-safe: #f0b429;
  --err: #ff6b5b; --err-t: #331815; --err-line: #7a3b33;
  --green: #3ecf8e; --green-t: #0f2a1f; --green-line: #2a6b4d;
  /* Purple is structure, and structure has to separate from a violet-leaning dark ground:
     the fills keep the brand hue, anything that has to be READ takes the lifted step. This
     is the same inversion the Print dialect's dark theme already makes. */
  --purple: #7a3fa8; --purple-d: #33044f; --purple-l: #b98be4; --purple-t: #241536;
  --purple-ink: #b98be4;
  --purple-line: #5b3a7e; --on-purple-accent: #d9b8f2;
  --edge: #6c7284;
  --scrim: rgba(0,0,0,.62);
  /* A shadow on a dark ground reads as almost nothing; these lean on the black harder so
     the three elevation tiers still mean what they meant. */
  --sh: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.32);
  --sh-md: 0 4px 14px rgba(0,0,0,.46);
  --sh-lg: 0 18px 60px rgba(0,0,0,.62);
}

/* ================================================================================
   The document scrollbar. Not a token, and the only rule in this file — it lives here
   because it is the one piece of chrome that is identical on EVERY page and has no
   page-specific form, and this is the only sheet all four consumers already link. In
   app.css it would reach the console and miss the sign-in pages and the wizard; in each
   of the three it would be the copy this file exists to prevent.

   app.css already paints the scrollbars of the boxes INSIDE the page (.scroll, .jobout,
   .dlgmain > .body, .md-pre, .inner) with --purple-l. The page's own scrollbar was left
   to the browser, so the window edge stayed the UA's grey next to purple ones a few
   pixels away. Both steps of --purple-l are on-theme by construction: #7a3fa8 on the
   light ground, lifted to #b98be4 in dark, where the brand purple would disappear into
   a violet-leaning page.

   Both syntaxes on purpose. `scrollbar-width`/`scrollbar-color` is the standard one and
   is what Firefox and current Chrome use; ::-webkit-scrollbar carries older WebKit, and
   is ignored where the standard properties apply. Same pairing app.css already uses.
   ================================================================================ */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--purple-l) transparent;
}
html::-webkit-scrollbar { width: 9px; height: 9px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: var(--purple-l); border-radius: 999px; }