/* H5 design tokens — the only source of colour, size and spacing (feat.web inv.web.tokens-only).
   Values from the UI doc; contrast checked against WCAG 2.1 (text ≥ 4.5:1, controls ≥ 3:1). */
:root {
  color-scheme: dark;
  --bg: #1C1B1A;
  --surface: #262422;
  --border: #3A3733;
  --border-control: #78736B;
  --text: #F4EFE6;
  --muted: #B9B2A6;
  --action: #F2A33A;
  --action-text: #F2A33A;
  --on-action: #1C1B1A;
  --waking: #6FA8FF;
  --good: #4CC48C;
  --warn: #F0B35A;
  --logo-chip: #FFFFFF; /* behind third-party marks (Google's G), in both themes */
  --bad: #F2766B;

  --font: Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-caption: 12px;
  --fs-table: 13px;
  --fs-body: 14px;
  --fs-h3: 15px;
  --fs-h2: 18px;
  --fs-h1: 24px;
  --fs-display: 44px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  --r-control: 6px;
  --r-card: 8px;
  --r-pill: 999px;

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--waking);
  --pulse: 1.6s;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #F4EFE6;
    --surface: #FFFFFF;
    --border: #D9D2C5;
    --border-control: #8A8378;
    --text: #1C1B1A;
    --muted: #6B655C;
    --action: #F2A33A;
    --action-text: #8F5A12;
    --on-action: #1C1B1A;
    --waking: #2A66C9;
    --good: #1F7A52;
    --warn: #9A5A12;
    --bad: #B3261E;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --pulse: 0s; }
}