/* Generated from design/tokens.json by scripts/build_tokens.py. Don't edit: change tokens.json. */

/* Design system v0.4. What each colour is for:
 * --paper: App background
 * --sheet: Surfaces: panels, tables, dialogs
 * --sheet-sunk: Inset areas, table headers
 * --ink: Primary text (Deep Navy)
 * --ink-2: Secondary text
 * --ink-3: Hints, placeholders
 * --rule: Borders and dividers
 * --rule-strong: Emphasised rules, secondary-button borders
 * --rule-input: Input and checkbox borders: 3:1 so an empty field is visible (2026-10-06)
 * --primary: Primary actions: navy (decided 2026-10-03); near-white in dark mode (2026-10-06); purple is for AI
 * --primary-hover: Primary action, hovered
 * --primary-tint: Selected rows and quiet primary backgrounds
 * --on-primary: Text on primary
 * --ok: Complete, consistent, proven, reconciled (text)
 * --ok-mark: Complete, consistent, proven (marks and fills)
 * --ok-tint: Success backgrounds
 * --attention: Needs review, missing evidence, expiring (text)
 * --attention-mark: Needs review (marks and fills)
 * --attention-tint: Warning backgrounds
 * --problem: Mismatch, critical exception, failure (text)
 * --problem-mark: Mismatch, failure (marks and fills)
 * --problem-tint: Problem backgrounds
 * --info: Information and link text
 * --info-tint: Information backgrounds
 * --ai: AI layer only (Rivium Purple)
 * --ai-hover: AI action, hovered
 * --on-ai: Text on AI buttons
 * --ai-tint: AI suggestion backgrounds
 * --brand-red: Logo only: never buttons or status
 * --electric: Charts and illustrations only: not text
 * --navy: Brand navy surfaces (website and help heroes) in both themes
 * --navy-deep: End of the navy hero gradient
 * --on-navy: Text on navy surfaces
 * --on-navy-2: Secondary text on navy surfaces
 * --link-on-navy: Links on navy surfaces
 * --night: Website footer and staff bar (same in both themes)
 * --night-raised: Buttons and chips on night surfaces
 * --on-night: Text on night surfaces
 * --on-night-2: Secondary text and links on night surfaces
 * --on-night-3: Muted text on night surfaces (footer small print)
 * --on-night-link: Links on night surfaces (website footer)
 * --env-badge: The Staging / Development badge in the staff bar
 * --mark-none: "Not yet" marks (always with a word)
 * --focus: 2px focus ring with a 2px offset
 */

:root {
  color-scheme: light;
  --paper: #F8F9FA;
  --sheet: #FFFFFF;
  --sheet-sunk: #F1F5F9;
  --ink: #14213D;
  --ink-2: #475569;
  --ink-3: #5B6B80;
  --rule: #E2E8F0;
  --rule-strong: #CBD5E1;
  --rule-input: #7E8A9E;
  --primary: #14213D;
  --primary-hover: #24345C;
  --primary-tint: #E2E8F0;
  --on-primary: #FFFFFF;
  --ok: #15803D;
  --ok-mark: #16A34A;
  --ok-tint: #DCFCE7;
  --attention: #B45309;
  --attention-mark: #D97706;
  --attention-tint: #FEF3C7;
  --problem: #B91C1C;
  --problem-mark: #DC2626;
  --problem-tint: #FEE2E2;
  --info: #1D4ED8;
  --info-tint: #DBEAFE;
  --ai: #5E60CE;
  --ai-hover: #4F51B8;
  --on-ai: #FFFFFF;
  --ai-tint: #EEF0FF;
  --brand-red: #E63946;
  --electric: #4895EF;
  --navy: #14213D;
  --navy-deep: #1B2B52;
  --on-navy: #FFFFFF;
  --on-navy-2: #CBD5E1;
  --link-on-navy: #BFDBFE;
  --night: #0F172A;
  --night-raised: #273449;
  --on-night: #F8FAFC;
  --on-night-2: #CBD5E1;
  --on-night-3: #94A3B8;
  --on-night-link: #E2E8F0;
  --env-badge: #B45309;
  --mark-none: #94A3B8;
  --focus: #14213D;
  --shadow-card: 0 1px 2px rgb(15 23 42 / 0.05);
  --shadow-float: 0 8px 24px rgb(15 23 42 / 0.14);
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-document: "Source Serif 4", "Georgia", serif;
  --text-12: 0.75rem;
  --text-12-line: 1rem;
  --text-13: 0.8125rem;
  --text-13-line: 1.25rem;
  --text-14: 0.875rem;
  --text-14-line: 1.25rem;
  --text-15: 0.9375rem;
  --text-15-line: 1.375rem;
  --text-16: 1rem;
  --text-16-line: 1.5rem;
  --text-17: 1.0625rem;
  --text-17-line: 1.625rem;
  --text-18: 1.125rem;
  --text-18-line: 1.625rem;
  --text-19: 1.1875rem;
  --text-19-line: 1.875rem;
  --text-20: 1.25rem;
  --text-20-line: 1.75rem;
  --text-22: 1.375rem;
  --text-22-line: 1.875rem;
  --text-25: 1.5625rem;
  --text-25-line: 2rem;
  --text-31: 1.9375rem;
  --text-31-line: 2.375rem;
  --text-36: 2.25rem;
  --text-36-line: 2.75rem;
  --text-39: 2.4375rem;
  --text-39-line: 2.875rem;
  --text-44: 2.75rem;
  --text-44-line: 3.25rem;
  --text-48: 3rem;
  --text-48-line: 3.5rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-14: 0.875rem;
  --space-16: 1rem;
  --space-18: 1.125rem;
  --space-20: 1.25rem;
  --space-22: 1.375rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-36: 2.25rem;
  --space-40: 2.5rem;
  --space-44: 2.75rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-callout: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 9999px;
  --motion-fast: 150ms ease-out;
  --content-max: 1200px;
  --width-form: 520px;
  --width-email: 600px;
  --width-article: 720px;
  --width-document: 820px;
  --measure: 72ch;
  --touch-min: 44px;
  --space-hero-top: 3.5rem;
  --space-hero-bottom: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0F172A;
    --sheet: #1E293B;
    --sheet-sunk: #273449;
    --ink: #F8FAFC;
    --ink-2: #CBD5E1;
    --ink-3: #94A3B8;
    --rule: #334155;
    --rule-strong: #475569;
    --rule-input: #718096;
    --primary: #F8FAFC;
    --primary-hover: #E2E8F0;
    --primary-tint: #273449;
    --on-primary: #14213D;
    --ok: #4ADE80;
    --ok-mark: #4ADE80;
    --ok-tint: #143826;
    --attention: #FBBF24;
    --attention-mark: #FBBF24;
    --attention-tint: #3B2A0C;
    --problem: #F87171;
    --problem-mark: #F87171;
    --problem-tint: #3F1A1D;
    --info: #60A5FA;
    --info-tint: #172B4D;
    --ai: #9A9DEF;
    --ai-hover: #B0B2F4;
    --on-ai: #0F172A;
    --ai-tint: #262B5C;
    --brand-red: #F05260;
    --electric: #4895EF;
    --navy: #14213D;
    --navy-deep: #1B2B52;
    --on-navy: #FFFFFF;
    --on-navy-2: #CBD5E1;
    --link-on-navy: #BFDBFE;
    --night: #0F172A;
    --night-raised: #273449;
    --on-night: #F8FAFC;
    --on-night-2: #CBD5E1;
    --on-night-3: #94A3B8;
    --on-night-link: #E2E8F0;
    --env-badge: #B45309;
    --mark-none: #64748B;
    --focus: #9496EE;
    --shadow-card: none;
    --shadow-float: 0 8px 24px rgb(0 0 0 / 0.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0F172A;
  --sheet: #1E293B;
  --sheet-sunk: #273449;
  --ink: #F8FAFC;
  --ink-2: #CBD5E1;
  --ink-3: #94A3B8;
  --rule: #334155;
  --rule-strong: #475569;
  --rule-input: #718096;
  --primary: #F8FAFC;
  --primary-hover: #E2E8F0;
  --primary-tint: #273449;
  --on-primary: #14213D;
  --ok: #4ADE80;
  --ok-mark: #4ADE80;
  --ok-tint: #143826;
  --attention: #FBBF24;
  --attention-mark: #FBBF24;
  --attention-tint: #3B2A0C;
  --problem: #F87171;
  --problem-mark: #F87171;
  --problem-tint: #3F1A1D;
  --info: #60A5FA;
  --info-tint: #172B4D;
  --ai: #9A9DEF;
  --ai-hover: #B0B2F4;
  --on-ai: #0F172A;
  --ai-tint: #262B5C;
  --brand-red: #F05260;
  --electric: #4895EF;
  --navy: #14213D;
  --navy-deep: #1B2B52;
  --on-navy: #FFFFFF;
  --on-navy-2: #CBD5E1;
  --link-on-navy: #BFDBFE;
  --night: #0F172A;
  --night-raised: #273449;
  --on-night: #F8FAFC;
  --on-night-2: #CBD5E1;
  --on-night-3: #94A3B8;
  --on-night-link: #E2E8F0;
  --env-badge: #B45309;
  --mark-none: #64748B;
  --focus: #9496EE;
  --shadow-card: none;
  --shadow-float: 0 8px 24px rgb(0 0 0 / 0.45);
}

@media (max-width: 960px) {
  :root { --space-hero-top: 2rem; --space-hero-bottom: 3rem; }
}

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