/* DESIGN TOKENS (D1, owner-approved 2026-10-07): the ONE place a color value
   is written. Every page links this file first; its own :root only names
   these tokens (`--acc: var(--color-accent-fg)`). CI (tools/ci/design_tokens.py)
   fails when a raw color is added anywhere else; the colors already in the
   pages are listed in tools/ci/design_tokens_baseline.json and may only go
   down. Values and names: pilot/design/STYLE_GUIDE_PROPOSAL.md section 3.

   Tiers: primitives (what the value is) -> semantic (what it is for). Pages
   use the semantic names; primitives are for this file only. */

/* Fonts: Sora for headings, DM Sans for text, served from this site (no
   request to Google). SIL Open Font License, fonts/OFL-*.txt. */
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/dm-sans-latin.woff2) format("woff2"); }
@font-face { font-family:"Sora"; font-style:normal; font-weight:600 800; font-display:swap; src:url(/fonts/sora-latin.woff2) format("woff2"); }

:root {
  /* primitives */
  --gray-1000:#0b0e12; --gray-950:#0e1116; --gray-900:#12161b; --gray-850:#171b22; --gray-800:#1d222b;
  --gray-750:#262c35; --gray-650:#667080; --gray-500:#8b949e; --gray-400:#9aa7b4; --gray-200:#c9d1db; --gray-100:#e8edf2;
  --white:#ffffff; --black:#000000;
  --blue-300:#7cc0ff; --blue-400:#4aa8ff; --blue-900:#1b2a3a; --blue-ink:#06121f;
  --yellow-400:#f6c343; --yellow-800:#5a4a15; --yellow-900:#2a2410; --yellow-ink:#1a1400;
  --green-300:#7fe0a8; --green-400:#4cc38a; --green-500:#2fbf5b; --green-600:#2f7d57; --green-800:#1c5237; --green-900:#123020;
  --red-300:#f0a0a0; --red-400:#ff6b62; --red-600:#da3633; --red-800:#522020; --red-900:#301616;
  --siren-red-400:#ff4b4b; --siren-red-600:#e02424; --siren-gray-850:#16181c; --siren-gray-800:#1c1f24;
  --scribe-teal-400:#3fd0c9;
  --scrim-60:rgb(0 0 0 / .6); --header-glass:rgb(14 17 22 / .92);

  /* semantic (dark, the shipping theme) */
  --color-bg-canvas:var(--gray-950);
  --color-bg-surface:var(--gray-850);
  --color-bg-inset:var(--gray-900);
  --color-bg-raised:var(--gray-800);
  --color-bg-media:var(--gray-1000);
  --color-bg-header:var(--header-glass);
  --color-border-subtle:var(--gray-750);
  --color-border-control:var(--gray-650);   /* inputs, switch track, box toggles: 3:1 or better (WCAG 1.4.11) */
  --color-fg-default:var(--gray-100);
  --color-fg-muted:var(--gray-400);
  --color-fg-disabled:var(--gray-500);
  --color-fg-on-cta:var(--yellow-ink);
  --color-fg-on-accent:var(--blue-ink);
  --color-accent-fg:var(--blue-400);
  --color-accent-fg-strong:var(--blue-300);
  --color-accent-bg-subtle:var(--blue-900);
  --color-cta-bg:var(--yellow-400);
  --color-success-fg:var(--green-300);
  --color-success-bg:var(--green-900);
  --color-success-border:var(--green-800);
  --color-success-solid:var(--green-500);
  --color-success-dot:var(--green-400);
  --color-switch-on:var(--green-600);
  --color-switch-knob:var(--gray-200);
  --color-danger-fg:var(--red-300);
  --color-danger-bg:var(--red-900);
  --color-danger-border:var(--red-800);
  --color-danger-solid:var(--red-400);
  --color-danger-strong:var(--red-600);
  --color-warning-fg:var(--yellow-400);
  --color-warning-bg:var(--yellow-900);
  --color-warning-border:var(--yellow-800);
  --color-focus-ring:var(--blue-400);
  --color-link:var(--blue-400);
  --color-scrim:var(--scrim-60);
  --color-white:var(--white);

  /* type */
  --font-body:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading:Sora, "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}