/**
 * The Ember design tokens, for every control-plane page that wears the product
 * skin — `capture.html` and `connect.html` today, both of which link this
 * file before `capture-ember.css` (the page rules the two share). Link it
 * BEFORE the page's own stylesheet.
 *
 * These values are a MIRROR of the extension side panel's `:root`
 * (browser-control/ember-extension/sidepanel.html). The panel cannot link this
 * file — it is a bundled extension, this is a build-less page — so if you
 * change a value here, change it there too. One deliberate divergence: `--font`
 * — the panel bundles Noto Sans, this file still bundles Inter (the font
 * face-off swapped only the panel). The status tones
 * (--amber/--amber-tint/--ok/--danger/--danger-tint) mirror the panel's
 * values verbatim; --ok-tint is this file's one addition (the panel has no
 * ok-tinted surface; the capture page's confirmed-verdict tints need one,
 * same construction as the panel's --danger-tint).
 *
 * The design language, in brief: warm neutrals (ink never pure black, paper
 * never pure white), --ember reserved for FILLS (never as `color` — it is
 * only 3.9:1 as text; use --ember-ink), flat ink primaries that invert on
 * hover, quiet sentence-case labels, soft borders with a whisper of shadow.
 */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The text ramp. Every one of these is a TEXT colour, so every one of them
     clears WCAG AA (4.5:1) against the DARKEST surface text sits on — the
     tinted chip/selected-row fill (--line-soft, #f5f1ec), not just --bg.
     Measured there: ink 15.5, ink-soft 5.3, ink-faint 4.7, ink-ghost 4.7.
     --ink-ghost used to sit at #a9a099 (2.5:1 on --bg) and --ink-faint at
     #7a726b, which passed on --bg but dropped to 4.2 on a chip — that is
     what put the step times, tab chips, timeline ends and idle dividers
     below the threshold. Hierarchy now comes from size and weight rather
     than from fading text out. */
  --ink: #1c1a17;
  --ink-soft: #6a625b;
  --ink-faint: #726a63;
  --ink-ghost: #716962;
  /* NON-text only: hairlines and decorative marks (the crumb separators,
     which are aria-hidden). Never put a word in this colour. */
  --ink-decor: #a9a099;
  --bg: #fbfaf8;
  --surface: #ffffff;
  --line: #ede8e2;
  --line-soft: #f5f1ec;

  /* --ember is a FILL (4.4:1 — below AA for text). Small ember-coloured
     text uses --ember-ink (6.3:1). */
  --ember: #d2451e;
  --ember-ink: #a8360f;

  /* Status tones — panel-mirrored (see header); ember stays fill-only. */
  --amber: #f2a03d;
  --amber-tint: #fbebd2;
  --ok: #1f7a4d;
  --ok-tint: #e7f2ec;
  --danger: #c0392b;
  --danger-tint: #fdedeb;

  --radius: 12px;
  --radius-sm: 9px;
  --shadow-card: 0 1px 2px rgba(28, 26, 23, 0.05), 0 1px 1px rgba(28, 26, 23, 0.03);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}