/* Design tokens (UI-BRIEF §4). This is the ONLY file allowed to contain literal colours
   (eslint rule `pfl/no-literal-colours`). Single dark theme in V1.
   Documented exemption: <meta name="theme-color"> in src/*.html and theme_color/background_color in
   public/manifest.webmanifest hold the --bg hex, because neither can read CSS variables.
   tests/arch/static-assets.test.ts fails if they drift from --bg. */
:root {
  color-scheme: dark;

  /* Colour */
  --bg: #14141b;
  --surface: #1d1d27;
  --surface-2: #262633;
  --border: #3a3a4a;
  --text: #ececf1;
  --text-dim: #a9a9b8;
  --accent: #ff5577;
  --on-accent: #14141b;
  --ok: #5fd38d;
  --warn: #ffc857;
  --err: #ff6b6b;
  --onion-prev: #ff7a5c;
  --onion-next: #c77dff; /* violet: the old blue vanished on blue art (m7) */
  --onion-prev-cb: #ff9f1c;
  --onion-next-cb: #2ec4b6;
  --checker-a: #2a2a36;
  --checker-b: #33333f;
  --grid: rgba(255, 255, 255, 0.12);
  /* Canvas overlays and background presets (T2, F6 / RQ27): independent of the UI theme. */
  --canvas-light: #e9e9f0;
  --canvas-dark: #0d0d12;
  --grid-on-light: rgba(20, 20, 27, 0.2);
  --grid-off: rgba(0, 0, 0, 0);
  --overlay-fg: #ffffff;
  --overlay-shadow: rgba(20, 20, 27, 0.75);
  --overlay-hover: rgba(255, 255, 255, 0.26);
  /* Added in F2 from the approved design canvas (Main.dc.html / PhoneDrawing.dc.html). */
  --border-strong: #73738c;
  --text-disabled: #6a6a7c;
  --accent-text: #ff8fa6;
  --scrim: rgba(8, 8, 12, 0.6);
  --logo-ink: #14141b;
  --logo-page: #ececf1;
  --logo-cover: #ff5577;
  --logo-edge: #73738c;
  --err-bg: #3a1a22;
  --warn-bg: #33290f;
  --tag-1: #3d6aa8;
  --tag-2: #7a4cb8;
  --tag-3: #217f73;
  --tag-4: #8f6320;
  --on-tag: #ffffff;
  --range-tint: rgba(255, 85, 119, 0.16);

  /* Spacing (4 px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radius */
  --radius-control: 6px;
  --radius-sheet: 12px;

  /* Type: system stack only, no web fonts */
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-20: 20px;
  --text-28: 28px;
  --text-40: 40px;
  --text-ui: 14px;

  /* Elevation and motion */
  --shadow-sheet: 0 8px 24px rgba(0, 0, 0, 0.45);
  --motion-fast: 120ms;
  --motion-slow: 180ms;
  --ease: ease-out;

  /* Hit target floor */
  --hit: 44px;
}

@media (min-width: 1024px) {
  :root {
    --text-ui: 13px;
  }
}

/* Forced colours (Windows High Contrast): swatches keep their own colour (forced-color-adjust: none in app.css) and get a system-colour edge. */
:root {
  --swatch-edge: var(--border-strong);
}

@media (forced-colors: active) {
  :root {
    --swatch-edge: CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-slow: 0ms;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-ui);
  font-variant-numeric: tabular-nums;
  overscroll-behavior: none;
}