/* GovernanceOS design tokens. D81, ruled 16 Oct 2026. Source: brand/tokens.json */

@font-face{font-family:"Fraunces";src:url("fonts/fraunces-latin-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* raw palette: nine colours with jobs */
  --c-ink:#1a1a1a;
  --c-paper:#f9f9f9; /* cards, panels and records in light mode; text on ink. Ruled 17 Oct 2026 (D81.1) */
  --c-paper-soft:#ebebeb; /* dark-mode text: one step down from white to cut OLED glare */
  --c-canvas:#ffffff; /* page background in light mode. Ruled 17 Oct 2026 (D81.1) */
  --c-rule:#6e6e6f; /* darkened so secondary text keeps 4.5:1 on paper #f9f9f9 */
  --c-indigo:#003366;
  --c-blue:#0590cb;
  --c-refusal:#cc0000;
  --c-lapse:#ff9900;
  --c-produced:#0f6b36;
  /* accent pair, electric blue + deep indigo, 17 Oct 2026 (amends D81): highlights and calls to action only, never record state */
  --c-electric:#0a6fb0; /* button-safe electric blue: 5.4:1 under white */
  --c-electric-soft:#59b3fe; /* electric blue for text on dark: 7.7:1 on ink */
  --c-night:#0b1a3a;
  /* chart only, always with a legend and a second cue */
  --chart-1:#770000;--chart-2:#ffd000;--chart-3:#2a66b1;--chart-4:#652c8f;
  --chart-5:#d9bdda;--chart-6:#33cc66;--chart-7:#ff63b8;--chart-8:#59b3fe;

  /* type */
  --font-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --font-mark:"Montserrat","Century Gothic",sans-serif; /* Montserrat everywhere for identical rendering (17 Oct) */
  --fs-12:12px;--fs-14:14px;--fs-16:16px;--fs-18:18px;--fs-20:20px;
  --fs-24:24px;--fs-32:32px;--fs-40:clamp(30px,5vw,40px);--fs-56:clamp(34px,6.4vw,56px);
  --lh:1.6;

  /* space and shape */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --radius:4px;
  --measure:68ch;
  --wrap:1160px;

  /* semantic roles: light, ink on paper */
  --bg:var(--c-canvas);
  --surface:var(--c-paper); /* card, panel and record surfaces */
  --fg:var(--c-ink);
  --line:var(--c-rule);
  --tint:color-mix(in srgb,var(--c-ink) 4%,var(--c-canvas));
  --link:var(--c-indigo);
  --primary-bg:var(--c-indigo);
  --primary-fg:var(--c-paper);
  --focus:var(--c-indigo);
  /* state roles: text on paper in light mode */
  --refusal-fg:var(--c-refusal);--refusal-bg:transparent;--refusal-bd:var(--c-refusal);
  --produced-fg:var(--c-produced);--produced-bg:transparent;--produced-bd:var(--c-produced);
  --lapse-fg:var(--c-ink);--lapse-bg:var(--c-lapse);
  --chip-bg:var(--c-blue);--chip-fg:var(--c-ink);
  --header-bg:var(--c-canvas); /* canvas at the top of the page (D92) */
  --header-bg-scrolled:var(--c-paper); /* paper once the page scrolls (D92) */
  --header-shadow:0 1px 2px rgba(26,26,26,.06),0 4px 12px rgba(26,26,26,.05);
  --header-shadow-scrolled:0 1px 2px rgba(26,26,26,.08),0 8px 20px rgba(26,26,26,.08);
  --band-bg:var(--c-indigo);--band-fg:var(--c-paper);
  --accent:var(--c-indigo);
  --accent-grad:linear-gradient(100deg,var(--c-blue) 0%,var(--c-indigo) 100%);
  --cta-grad:linear-gradient(100deg,var(--c-indigo) 0%,var(--c-electric) 100%);
  --cta-fg:var(--c-paper);
  --cta-glow:0 6px 18px rgba(5,144,203,.30);
  --hl-grad:linear-gradient(100deg,rgba(5,144,203,.40),rgba(0,51,102,.24));
  --glow-a:rgba(5,144,203,.15);--glow-b:rgba(0,51,102,.12);
  color-scheme:light;
}

/* dark: swap ink and paper, blue where light uses indigo.
   Red and green fail 4.5:1 as text on ink, so states become fills with paper text. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--c-ink);--fg:var(--c-paper-soft);--surface:var(--c-ink);
    --tint:color-mix(in srgb,var(--c-paper-soft) 3%,var(--c-ink));
    --link:var(--c-blue);--primary-bg:var(--c-blue);--primary-fg:var(--c-ink);--focus:var(--c-blue);
    --refusal-fg:var(--c-paper-soft);--refusal-bg:var(--c-refusal);--refusal-bd:var(--c-refusal);
    --produced-fg:var(--c-paper-soft);--produced-bg:var(--c-produced);--produced-bd:var(--c-produced);
    --header-bg:var(--c-ink);--header-bg-scrolled:#232323;--header-shadow:0 1px 0 rgba(235,235,235,.10);--header-shadow-scrolled:0 1px 0 rgba(235,235,235,.16),0 8px 20px rgba(0,0,0,.45);--band-fg:var(--c-paper-soft);--accent:var(--c-electric-soft);--cta-grad:linear-gradient(100deg,#0b3f7a 0%,var(--c-electric) 100%);--cta-fg:var(--c-paper);--cta-glow:0 6px 20px rgba(5,144,203,.38);--hl-grad:linear-gradient(100deg,rgba(5,144,203,.60),rgba(30,90,170,.60));--glow-a:rgba(5,144,203,.16);--glow-b:rgba(30,90,170,.18);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--c-ink);--fg:var(--c-paper-soft);--surface:var(--c-ink);
  --tint:color-mix(in srgb,var(--c-paper-soft) 3%,var(--c-ink));
  --link:var(--c-blue);--primary-bg:var(--c-blue);--primary-fg:var(--c-ink);--focus:var(--c-blue);
  --refusal-fg:var(--c-paper-soft);--refusal-bg:var(--c-refusal);--refusal-bd:var(--c-refusal);
  --produced-fg:var(--c-paper-soft);--produced-bg:var(--c-produced);--produced-bd:var(--c-produced);
  --header-bg:var(--c-ink);--header-bg-scrolled:#232323;--header-shadow:0 1px 0 rgba(235,235,235,.10);--header-shadow-scrolled:0 1px 0 rgba(235,235,235,.16),0 8px 20px rgba(0,0,0,.45);--band-fg:var(--c-paper-soft);--accent:var(--c-electric-soft);--cta-grad:linear-gradient(100deg,#0b3f7a 0%,var(--c-electric) 100%);--cta-fg:var(--c-paper);--cta-glow:0 6px 20px rgba(5,144,203,.38);--hl-grad:linear-gradient(100deg,rgba(5,144,203,.60),rgba(30,90,170,.60));--glow-a:rgba(5,144,203,.16);--glow-b:rgba(30,90,170,.18);
  color-scheme:dark;
}

/* ---------- component layer: components read only these, never raw values ---------- */
:root{
  --button-primary-bg:var(--primary-bg);
  --button-primary-fg:var(--primary-fg);
  --button-primary-bg-hover:color-mix(in srgb,var(--primary-bg) 86%,var(--fg));
  --button-primary-bg-active:color-mix(in srgb,var(--primary-bg) 74%,var(--fg));
  --button-secondary-border:var(--line);
  --button-secondary-border-hover:var(--fg);
  --button-secondary-bg-active:var(--tint);
  --input-border:var(--line);
  --input-border-hover:var(--fg);
  --input-border-error:var(--c-refusal);
  --input-bg-disabled:var(--tint);
  --record-border:var(--line);
  --record-head-bg:var(--tint);
  --tag-produced-fg:var(--produced-fg);
  --tag-produced-bg:var(--produced-bg);
  --chip-regime-bg:var(--chip-bg);
  --chip-regime-fg:var(--chip-fg);
  --focus-ring:2px solid var(--focus);
}

/* ---------- motion: subtle, short, and off when the visitor asks for less ---------- */
:root{
  --dur-fast:120ms;
  --dur:200ms;
  --dur-slow:360ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --rise:8px;
  --stagger:70ms;
}