/* The design system's values, from the approved canvas's foundations board
   (design/2026-09-25-canvas/Foundations.dc.html; docs/lab/design-direction.md). Every colour of
   every stylesheet is named here and nowhere else (config/tests/test_design_system.py), which also
   checks each text colour against its grounds for WCAG AA contrast. The dark theme only: the light
   reading theme stays on the canvas for reference. */
:root {
  color-scheme: dark;

  /* Grounds, navy, darkest first. */
  --ground: #0a111b;
  --surface: #0f1824;
  --raised: #15202f;

  /* Text, brightest first: the chosen and the actual; the finding and reading text; interface
     text; meta and labels. */
  --text: #eef1f4;
  --text-hover: #ffffff;
  --text-reading: #d9dde2;
  --text-secondary: #b4b9bf;
  --text-muted: #878d95;

  /* Gold means live and nothing else: a request in flight, a running experiment, the playhead. */
  --live: #d4b06a;
  /* The second series of a figure; providers are labelled, never colour-coded. */
  --series-2: #7f9cc4;
  /* Red is for failure and an exceeded budget only. */
  --failure: #d9776b;
  --failure-text: #e3968c;
  --failure-line: rgba(217, 119, 107, 0.55);

  /* Lines: hairlines between rows, the edges of cards, the edges of controls. A text field's edge
     is what shows it is there, so it keeps 3:1 against the grounds (WCAG 1.4.11). */
  --line: rgba(238, 241, 244, 0.08);
  --line-strong: rgba(238, 241, 244, 0.14);
  --line-control: rgba(238, 241, 244, 0.22);
  --line-field: rgba(238, 241, 244, 0.4);
  /* A bar's empty track, and the hatching that marks an estimate. */
  --track: rgba(238, 241, 244, 0.06);
  --hatch: rgba(238, 241, 244, 0.35);

  /* Geist for text; Geist Mono for every number, time, ID and model name. */
  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  /* The type scale, size and leading. Nothing above 48px: the cinematic scale belongs to
     bfilipov.com. */
  --display-size: 40px;
  --display-leading: 48px;
  --heading-size: 24px;
  --heading-leading: 32px;
  --finding-size: 20px;
  --finding-leading: 30px;
  --reading-size: 17px;
  --reading-leading: 28px;
  --title-size: 16px;
  --title-leading: 22px;
  --label-size: 15px;
  --label-leading: 22px;
  --ui-size: 14px;
  --ui-leading: 22px;
  --meta-size: 13px;
  --meta-leading: 20px;
  --small-size: 12px;
  --small-leading: 18px;
  --figure-size: 32px;
  --figure-leading: 40px;

  /* Spacing, on a 4px grid: --space-N is N × 4px. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-22: 88px;
  --space-24: 96px;

  --radius-tag: 4px;
  --radius-control: 6px;
  --radius-card: 10px;
  --mark: 7px;

  /* The page's frame. */
  --gutter: var(--space-12);
  --header-height: 64px;
  --control-height: 36px;
  --field-height: 40px;
  --reading-width: 70ch;

  /* Motion: short, and none at all under reduced motion (base.css). */
  --duration-quick: 120ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* A phone: the canvas's MobileHome and MobileChat. */
@media (max-width: 640px) {
  :root {
    --display-size: 28px;
    --display-leading: 34px;
    --heading-size: 20px;
    --heading-leading: 28px;
    --finding-size: 17px;
    --finding-leading: 26px;
    --gutter: var(--space-5);
    --header-height: 56px;
    /* A finger's target: at least 44px. */
    --control-height: 44px;
    --field-height: 44px;
  }
}