/* Design tokens: every colour, font, radius and spacing value the page uses.
   To restyle the site, change this file first; styles.css holds layout only and reads these variables.
   The inline SVG diagram in index.html also takes its colours from these tokens.

   Choices (20 Oct 2026, against research/r9 V1, V2 and V5):
   - Light by default on a cool off-white; a charcoal dark theme, never a tinted near-black.
   - One accent, the sky blue of AI Accountant's own model chip and DEMO badge (#0da2e7 in the app),
     deepened for text contrast on light and lifted on dark, so the site and the demo read as one maker.
   - One typeface, Atkinson Hyperlegible Next (SIL OFL 1.1), self-hosted as a single Latin variable file.
     No monospace face anywhere on the page.
   - Radius rule: controls (buttons, the video toggle) 4px; media frames (loop, walkthrough poster) 8px.
     Nothing else is rounded. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("media/fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #fafbfc;
  --raised: #f0f2f5;
  --ink: #16181b;
  --muted: #555c66;
  --line: #dde1e6;
  --line-strong: #9aa2ad;
  --accent: #0a6896;
  --accent-ink: #ffffff;
  --accent-soft: #e3f1f9;
  --focus: #0a6896;
  --frame: #2a2d33;
  --radius-control: 4px;
  --radius-media: 8px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1120px;
  --measure: 40rem;
  --font: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1c1e22;
    --raised: #25282d;
    --ink: #e9ebee;
    --muted: #a7aeb7;
    --line: #353940;
    --line-strong: #5d646e;
    --accent: #5cc3f2;
    --accent-ink: #0f2533;
    --accent-soft: #1f3442;
    --focus: #8ad5f7;
    --frame: #3a3e45;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c1e22;
  --raised: #25282d;
  --ink: #e9ebee;
  --muted: #a7aeb7;
  --line: #353940;
  --line-strong: #5d646e;
  --accent: #5cc3f2;
  --accent-ink: #0f2533;
  --accent-soft: #1f3442;
  --focus: #8ad5f7;
  --frame: #3a3e45;
}