/* The canonical token set. DESIGN.md §1 is the contract; this file is the one
   place the values live.

   It sits in public/ rather than src/ so that every surface served from this
   origin links the SAME file — the React app (public/index.html) and the
   plain-HTML client (public/lite/index.html). A copy bundled through webpack
   would be content-hashed and unreachable from lite, and two copies of a
   palette is how the two surfaces drifted apart in the first place.

   Nothing here is a colour anyone picked twice: a value that needs to exist is
   added to DESIGN.md first, then here, then used. */

:root {
  /* Native controls — a <select> chevron, a checkbox, a scrollbar — are drawn
     by the platform, not by these tokens. Without this they stay light on a
     dark ground and the surface reads half-converted. */
  color-scheme: light dark;

  --bg:          #f4f1eb;  /* the page — warm paper, never pure white */
  --bg-raised:   #edeae3;  /* header, cards, anything sitting on the page */
  --bg-sunken:   #ece8e1;  /* wells, table stripes, scrollbar track */
  --ink:         #1a1a1a;  /* body text and rules at full strength */
  --ink-hover:   #333333;  /* hover/active state of an ink-ground control */
  --ink-muted:   #888888;  /* secondary text, labels, counts */
  --ink-faint:   #bbbbbb;  /* disabled, placeholder */
  --rule:        rgba(26,26,26,0.12);
  --rule-strong: rgba(26,26,26,0.35);
  --font:        'DM Mono', monospace;
  --radius:      0;
  --success:     #3a6b3a;  /* a card passed verification */
  --error:       #8b2a2a;  /* a card failed, a request errored */
  --warning:     #7a5a1a;  /* low-confidence field, needs a human */
}

/* A dark ledger is still a ledger: the same paper-and-ink relationship with the
   ground and the mark swapped, not a different design. The warm cast is kept —
   a neutral #000 ground reads as a terminal, not as paper seen at night.

   Started life as the plain-HTML surface's private dark mode, which was the
   right instinct in the wrong place. Promoted here so all three surfaces get
   it from one definition. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #161513;
    --bg-raised:   #1e1c19;
    --bg-sunken:   #121110;
    --ink:         #eceae5;
    --ink-hover:   #d6d3cc;
    --ink-muted:   #9a958c;
    --ink-faint:   #625e57;
    /* Not the light alphas mirrored. A 12% dark hairline on paper is plainly
       visible; 12% light on a dark ground is not, and the first dark render had
       input fields with no discernible edge. */
    --rule:        rgba(236,234,229,0.24);
    --rule-strong: rgba(236,234,229,0.48);
    --success:     #6fb28d;
    --error:       #e08573;
    --warning:     #d9c07a;
  }
}