/*
 * Stalewatch — design tokens
 * ==========================
 * Terminal-instrument register: light page chrome, dark data panels, hairline rules, radius 0
 * everywhere, no shadows and no gradients. One superfamily in three cuts (IBM Plex Sans / Mono /
 * Serif). Source: the design document, §02 Foundations.
 *
 * FILES ARE NUMBERED BECAUSE PROPSHAFT SORTS. `stylesheet_link_tag :app` expands to one <link> per
 * file in logical-path order, so cascade order is filename order. The kit got that right by luck
 * (application < blog < docs); with a dozen files luck runs out. Never add an unnumbered file.
 *
 * ────────────────────────────────────────────────────────────────────────────────────────────
 * TWO GROUNDS, ONE ALIAS SET. This is the decision everything else hangs off.
 *
 * The naive way to put dark panels on a light page is to override every child selector inside the
 * panel. That survives one block and not six primitives across two grounds. Instead `.panel`
 * REBINDS the semantic aliases on itself (see 20-ground.css), so a component is written once
 * against --fg / --rule / --breach-ink and is correct on both grounds with no `.panel .thing`
 * rule anywhere.
 *
 * There is no theme toggle and no prefers-color-scheme block. The dark panel is a COMPONENT, not a
 * theme: a measurement does not invert because of an OS setting. A spec pins the absence.
 *
 * ────────────────────────────────────────────────────────────────────────────────────────────
 * SIGNALS COME IN TWO FORMS, AND THAT IS NOT REDUNDANCY.
 *
 * The four signal hues were chosen against the dark panel, where all four pass contrast
 * comfortably. On the 0.972 page they do not: --breach is about 2.4:1 as text, --live about 1.9:1.
 * Shipping them as text on the light ground would be illegible for the readers who most need the
 * state to be obvious.
 *
 *   *-MARK  the swatch: chip fill, dot, chart stroke, left rule. NEVER used with `color:`.
 *   *-INK   the same signal as TEXT, darkened for the page and rebound brighter inside .panel.
 *
 * spec/design_system_spec.rb enforces the split. A consequence worth knowing: amber at a readable
 * lightness on white is brown, so on the light ground `frozen` is spent as a mark with the word
 * STALLING in --fg. The word was doing the work anyway — see the glyph rule in app/models/feed_state.rb.
 */

:root {
  /* ---- Ground A: the page. Light chrome. ----
     Values transcribed from the design file, not approximated. An earlier build used 0.006 chroma
     here and 0.014 on the panels; the difference is small per-token and compounds into a page that
     reads warmer and flatter than the instrument register the design is after. */
  --page:       oklch(0.972 0.002 250);
  --card:       oklch(0.985 0.001 250);
  --rule:       oklch(0.880 0.004 250);
  --rule-soft:  oklch(0.920 0.003 250);
  --rule-firm:  oklch(0.860 0.004 250);   /* component outlines, timeline frames */

  /* ---- Ground B: the data panel. Dark. Entered via .panel, never via a toggle. ---- */
  --panel:      oklch(0.175 0.008 250);
  --panel-deep: oklch(0.145 0.008 250);
  --panel-rule: oklch(0.285 0.010 250);

  /* ---- Ink on the page ---- */
  --fg:   oklch(0.220 0.010 250);  /* headings, primary datum */
  --fg-2: oklch(0.360 0.008 250);  /* body */
  --fg-3: oklch(0.460 0.008 250);  /* secondary prose */
  --fg-4: oklch(0.580 0.006 250);  /* labels, axis ticks */
  --fg-5: oklch(0.800 0.004 250);  /* NEVER TEXT. Hairlines and component borders. */

  /* ---- Ink on the panel (bound by .panel) ---- */
  --on-panel:   oklch(0.955 0.004 250);
  --on-panel-2: oklch(0.800 0.006 250);
  --on-panel-3: oklch(0.660 0.008 250);
  --on-panel-4: oklch(0.420 0.010 250);  /* never text */

  /* ---- Signals ----
     TWO FORMS EACH, and the pairing is the design's, not an invention.
       *-MARK  the full-strength hue: chart strokes, swatches, rules, the one filled chip.
       *-INK   the same hue darkened until it is legible as TEXT on the light ground.
     A chip is a low-alpha TINT of the mark with the ink on top, which is what makes the state
     readable without a separate colour system. See 40-primitives.css. */
  --live:   oklch(0.76 0.13 195);   --live-ink:   oklch(0.38 0.13 150);
  --frozen: oklch(0.79 0.13 80);    --frozen-ink: oklch(0.44 0.11 70);
  --breach: oklch(0.66 0.17 25);    --breach-ink: oklch(0.48 0.16 25);
  --inband: oklch(0.72 0.14 150);   --inband-ink: oklch(0.38 0.13 150);
  --neutral-ink: oklch(0.38 0.008 250);        /* the chip that carries no state */
  --on-signal:   oklch(0.99 0 0);              /* text on the FILLED breach chip */

  /* The accent is its OWN hue (210), not the live signal (195). A link must not read as a feed
     state, and the design gives it a distinct hue rather than an alias. */
  --accent:      oklch(0.50 0.11 210);
  --accent-ink:  oklch(0.44 0.11 210);
  --accent-deep: oklch(0.40 0.13 210);

  /* ---- Type ----
     One superfamily, three cuts. --font-serif is spent ONLY inside .prose: research prose is the
     one place an argument is being made rather than a number reported, and a spec pins that so a
     serif never leaks into the instrument. */
  --font-sans:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "IBM Plex Serif", ui-serif, Georgia, serif;

  /* ---- Grid and rhythm ---- */
  --max: 1440px;
  --gutter: 20px;
  --margin: clamp(20px, 3vw, 40px);
  --measure: 68ch;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 20px; --s5: 32px; --s6: 56px;
  --row-h: 40px;
  --hair: 1px;

  /* One radius, stated once, zero forever. An instrument has square corners. */
  --r: 0;
}

/* The narrow canvas is a token step, not a separate stylesheet: the same components read the same
   values and transpose. 48px rows because a 40px row is not a comfortable tap target. */
@media (max-width: 720px) {
  :root { --gutter: 16px; --margin: 16px; --row-h: 48px; }
}