/* The hub's design tokens: every colour, font, size and radius in one file, so the look can be restyled without touching
   a component (dashboard/PLAN.md section 11). Seeded from Capture's web client (the app palette, light and dark) with
   Summrex blue as the light accent and the report's status colours. Text pairs pass WCAG AA: ink 15:1 and muted 7:1 on
   the card, the accent 8.6:1 on white; up and down are also told apart by an arrow, never by colour alone. */
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --ink: #1b2430;
  --muted: #4b5563;
  --accent: #1e40af;
  --accent-ink: #ffffff;
  --accent-soft: #e8edfb;
  --line: #d9dee8;
  --up: #1f6b45;
  --down: #9b2c2c;
  --warn-bg: #fff4d6;
  --warn-ink: #5c4300;
  --danger: #b42318;
  --focus: #1d4ed8;
  --chart: #1e40af;
  --chart-previous: #6b7280;
  --chart-grid: #e7eaf1;
  --bar: #c9d4f3;
  --tile-off: #f0f2f7;
  /* The chart lines, one colour per metric, always in this order: checked for colour blindness, light and dark (the
     dataviz validator's adjacent pairs), and 3 to 1 or more on the card and on a chosen card's tint (hub/test/web.test.ts). */
  --series-1: #2a78d6;
  --series-2: #c9561f;
  --series-3: #12875f;
  --series-4: #6250d6;

  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-xs: 12px;
  --t-sm: 14px;
  --t-md: 16px;
  --t-lg: 20px;
  --t-xl: 24px;
  --t-num: 32px;
  --t-score: 56px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;

  --r-card: 12px;
  --r-control: 8px;
  --r-button: 10px;
  --r-pill: 999px;
  --tap: 44px;
  --max: 1120px;
  --max-narrow: 560px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* Dark: the device's setting, unless the person chose light; or the person chose dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f141b;
    --card: #171e27;
    --ink: #e8ecf2;
    --muted: #a7b0bd;
    --accent: #7fa3ff;
    --accent-ink: #0b1220;
    --accent-soft: #1d2a44;
    --line: #2a3442;
    --up: #6fd39b;
    --down: #ff8a80;
    --warn-bg: #3a2f10;
    --warn-ink: #ffe3a3;
    --danger: #ff8a80;
    --focus: #9db9ff;
    --chart: #7fa3ff;
    --chart-previous: #8b95a5;
    --chart-grid: #232c38;
    --bar: #2b3d66;
    --tile-off: #131a22;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #9085e9;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #0f141b;
  --card: #171e27;
  --ink: #e8ecf2;
  --muted: #a7b0bd;
  --accent: #7fa3ff;
  --accent-ink: #0b1220;
  --accent-soft: #1d2a44;
  --line: #2a3442;
  --up: #6fd39b;
  --down: #ff8a80;
  --warn-bg: #3a2f10;
  --warn-ink: #ffe3a3;
  --danger: #ff8a80;
  --focus: #9db9ff;
  --chart: #7fa3ff;
  --chart-previous: #8b95a5;
  --chart-grid: #232c38;
  --bar: #2b3d66;
  --tile-off: #131a22;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #9085e9;
  --shadow: none;
}