/*
 * Design tokens.
 *
 * Declared once, here, so that every screen is built from a reviewed palette rather than drifting
 * toward whatever a framework supplies by default. Semantic colours are
 * paired with a tinted background because risk and connection state are conveyed by a
 * chip, and a chip needs both. Colour is never the sole carrier of meaning: each state
 * also has a text label, which is a WCAG requirement and a practical one, since these
 * screens are read under time pressure and printed for case files.
 *
 * The values below are the ones the August 2026 mockup is drawn from. The palette already agreed
 * with it exactly; what differed was shape and scale — corner radius, type size, and how much air
 * sits around a control. Those are the tokens that changed, so the alignment happens here rather
 * than as a hundred edits in the component sheet.
 */

:root {
  /* Brand */
  --brand-primary: #ee7203;
  --brand-primary-tint: #fdebdb;
  --brand-secondary: #1b3f8b;

  /* Surfaces */
  --bg: #f4f3ef;
  --card: #ffffff;
  --panel: #fafaf8;
  --line: #e4e2da;
  --line-soft: #efede6;

  /* Row states. A warm tint for the row under the pointer and a cool one for the row that is open,
     so that hovering and having-opened never read as the same thing on a dense table. */
  --row-hover: #fbfaf7;
  --row-open: #f5f7fb;
  --row-open-line: #e2e8f4;

  /* Text, descending emphasis */
  --tx: #1f1e1c;
  --tx2: #66655f;
  --tx3: #8c8a82;
  --tx4: #a8a69e;

  /* Semantic */
  --green: #2f7d4f;
  --amber: #b5790a;
  --red: #c23b3b;
  --green-bg: #eaf4ee;
  --amber-bg: #fdf3e2;
  --red-bg: #fbeaea;

  /* The two quiet tiers on the minimap and the timeline rail. Greys rather than the brand navy, as the
     mockup draws them: the flagged tier is the only one that takes a colour, so that colour is the
     shape of the session at a glance. */
  --tier-routine: #dedcd4;
  --tier-key: #b6b4ab;
  --tier-routine-ink: #c6c4bb;

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-2xs: 0.65625rem; /* 10.5px — the interval in a timeline gutter, the minimap's edge labels */
  --fs-xs: 0.6875rem; /* 11px  — micro labels, legends */
  --fs-sm: 0.78125rem; /* 12.5px — hints, chips, secondary controls */
  --fs-base: 0.875rem; /* 14px  — the results table and other dense content */
  --fs-md: 1rem; /* 16px  — body copy and form controls */
  --fs-lg: 1.125rem; /* 18px  — card titles */
  --fs-xl: 1.375rem; /* 22px */

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem; /* page gutter, vertical */
  --sp-8: 3.5rem; /* page gutter, horizontal */

  /* Radius, as a scale rather than a single value. The mockup distinguishes a panel (generous) from
     a control (moderate) from a tag (slight), and collapsing those onto one radius is most of what
     made the two look unrelated. */
  --radius-xs: 4px; /* signal tags, inline badges */
  --radius-sm: 6px; /* compact controls */
  --radius: 8px; /* inputs, buttons, minimap */
  --radius-lg: 14px; /* cards and panels */
  --radius-pill: 999px;

  /* Control heights, so an input and the button beside it line up without either being nudged. */
  --control-h: 50px;
  --control-h-sm: 34px;
  --control-h-xs: 30px; /* the controls in a panel's own head, which sit beside a heading */

  /* Focus ring. Deliberately high-contrast: the row disclosure and the minimap are both
     keyboard-operable, and an invisible focus ring makes them unusable. */
  --focus-ring: 2px solid var(--brand-secondary);
  --focus-offset: 2px;
}