/* Design tokens. The one place a colour, a hairline or a type stack is decided.
 *
 * Two rules hold this file together.
 *
 * The first is that red means one thing. It was previously the primary button,
 * the focus ring, the delete label, the error toast, the high-risk badge, the
 * selected-plan outline AND the fill for a low-automation-coverage bar - seven
 * jobs, two of which contradict each other. A colour that says both "press this"
 * and "this is wrong" says neither. Red is now brand, primary action, focus, and
 * genuine alarm. Everything that used to borrow it has its own token below.
 *
 * The second is that there is one theme. The old prefers-color-scheme block
 * never overrode the accent, so #d52b1e sat on #14161a at about 4:1 - under AA
 * for the small text it was used on. A half-supported theme is worse than one
 * theme, so it is gone rather than finished.
 */

:root {
  /* --- ground ---
   * Neutral, pulled a few degrees toward the accent so it reads as chosen
   * rather than inherited. A pure grey next to a saturated red looks like a
   * default that nobody picked. */
  --page:    #f4f2f2;   /* the body behind everything */
  --surface: #ffffff;   /* cards, tables, panels, the app bar */
  --sunk:    #ece9e9;   /* row hover, inset wells, the sidebar ground */

  /* --- ink --- */
  --ink:   #16110f;     /* body and headings */
  --muted: #6a5f5d;     /* labels, secondary text, table headers. 5.8:1 on page */
  --faint: #948a88;     /* furniture only - never a sentence someone has to read */

  /* --- hairlines ---
   * Two weights: --rule separates things, --rule-2 separates rows inside one
   * thing. Using one weight for both is what makes a dense table look like a
   * grid of boxes rather than a list. */
  --rule:   #dcd6d5;
  --rule-2: #eae5e4;

  /* --- the accent ---
   * Swiss red. #d8232a rather than the flag's pure #ff0000: the true red is
   * unusable as an interface colour (it vibrates against text and fails contrast
   * as a fill), and every Swiss brand that has to live on a screen makes the same
   * adjustment. The flag mark itself uses this same value, so the logo and the
   * Save button are the one red. */
  --accent:      #d8232a;
  --accent-d:    #ab161c;   /* hover and pressed */
  --accent-wash: #fbebeb;   /* selected nav row, error backgrounds */

  /* --- semantic state ---
   * Separate from the accent on purpose. "Approved" is not a brand moment and
   * "proposed" is not an alarm - both used to be drawn in some shade of the
   * accent, which is why a waiting row and a dangerous one looked alike. */
  --ok:        #1f7a4c;  /* approved, enabled, succeeded */
  --ok-wash:   #e8f4ee;
  --warn:      #a45a09;  /* proposed, paused, asks-first: waiting, not wrong */
  --warn-wash: #fdf2e4;
  --danger:    #b3261e;  /* destructive, once confirmed. Deeper than the accent */
  --info:      #2158c8;

  /* --- neutral data scale ---
   * For quantities that carry no judgement. Coverage bars used to run red at the
   * low end, which painted "this work is still done by a person" as a failure. */
  --scale-lo:  #6b7686;
  --scale-mid: #a45a09;
  --scale-hi:  #1f7a4c;

  /* --- elevation --- */
  --shadow:    0 1px 2px rgba(22, 17, 15, .08), 0 6px 20px rgba(22, 17, 15, .06);
  --shadow-lg: 0 2px 6px rgba(22, 17, 15, .10), 0 18px 44px rgba(22, 17, 15, .14);

  /* --- type ---
   * One grotesque across the whole system, separated by weight and size rather
   * than by family. That is the Swiss method and it removes the pairing question.
   * The mono is not decoration: capability keys, cron expressions, config
   * hashes, secret refs and account IDs are all compared character by character,
   * so they get a face that lines up. */
  --grot: "Helvetica Neue", "Arial Nova", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  /* --- spacing ---
   * An 8px scale, so nothing is set by eye. The old stylesheet ran on .35rem,
   * .6rem and .7rem paddings in three different places for the same job. */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;

  /* --- shell metrics --- */
  --appbar-h: 52px;
  --nav-w:    228px;
  --content-max: 1440px;
}