/* Design tokens shared by app.css and marketing.css.
   Token NAMES are a stable contract — both stylesheets and a lot of inline
   style="" attributes reference them. Refine values here; don't rename.

   "The register" — the whole product's identity, not just the marketing
   site. A Single Central Record is literally a statutory register, so the
   palette is ink-on-paper with one sparing red "stamp" accent rather than
   generic SaaS blue/teal-on-white. Extended app-wide 2026-09-28 (was
   marketing-only from 2026-09-27) — see --mkt-* below, now also the
   source for --color-navy-*, --color-blue-*, --color-teal-*'s values, kept
   as separate token names only because renaming them would mean re-editing
   every inline style="" attribute across the app for zero behavioural
   gain. */
:root {
  /* ---- Brand: ink-navy is both "navy" and "blue" here — the free-standing
     blue accent from the old SaaS palette is retired in favour of one ink
     family, with register-green standing in for the old teal. ---- */
  --color-navy-950: #16213d;
  --color-navy-900: #1c2a4a;
  --color-navy-800: #233252;
  --color-navy-700: #2c3d61;
  --color-blue-600: #16213d;
  --color-blue-500: #2c3d61;
  --color-blue-100: #e9ebe6;

  --color-teal-600: #1e5631;
  --color-teal-500: #2a7048;
  --color-teal-100: #e6efe8;

  /* Section framing: a slim top rail on section cards, and a soft wash behind
     the top of the content area. Both deliberately subtle. */
  --gradient-rail: linear-gradient(90deg, var(--color-blue-600), var(--color-teal-500));
  --gradient-hero-wash: linear-gradient(175deg, rgba(22, 33, 61, 0.05), rgba(30, 86, 49, 0.03) 180px, var(--color-bg) 420px);
  --gradient-brand-mark: var(--color-navy-950);

  /* ---- Status semantics: softer fills, high-contrast text. Same
     grey/amber/green/red hues everyone already reads at a glance for
     compliance status — pulled into the ink/paper/stamp family rather
     than restyled into something unfamiliar. ---- */
  --color-status-not-started-bg: #eeece6;
  --color-status-not-started-fg: #55617a;
  --color-status-in-progress-bg: #f6ecd6;
  --color-status-in-progress-fg: #7a5209;
  --color-status-complete-bg: #e2efe6;
  --color-status-complete-fg: #1e5631;
  --color-status-blocked-bg: #f6dede;
  --color-status-blocked-fg: #9c2b2b;

  /* ---- Neutrals ---- */
  --color-bg: #faf9f5;
  --color-surface: #ffffff;
  --color-surface-alt: #f5f3ee;
  --color-surface-sunken: #efece4;
  --color-border: #e2ddd0;
  --color-border-subtle: #ece8e0;
  --color-border-strong: #c9c2b0;
  --color-text: #16213d;
  --color-text-muted: #55617a;
  --color-text-faint: #8791a3;

  /* ---- Type. One family for everything: Atkinson Hyperlegible, self-hosted (public/assets/fonts/, see fonts.css)
     - CSP is font-src 'self', so no third-party font CDN loads at runtime. Chosen for legibility (distinct
     characters, designed for low vision). --font-serif and --font-register below are kept as aliases so every
     existing rule that names them follows the same family. ---- */
  --font-sans: "Atkinson Hyperlegible", "Segoe UI Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.84rem;
  --text-base: 0.94rem;
  --text-md: 1.02rem;
  --text-lg: 1.2rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.9rem;
  --tracking-tight: -0.011em;
  --tracking-wide: 0.04em;

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

  /* ---- Shape & depth: crisper corners and quieter shadows than the old
     SaaS-card look — rules and borders carry structure, shadows are just
     a hint of lift, not the thing doing the work. ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(22, 33, 61, 0.04);
  --shadow-sm: 0 1px 2px rgba(22, 33, 61, 0.05), 0 1px 1px rgba(22, 33, 61, 0.03);
  --shadow-md: 0 4px 14px -4px rgba(22, 33, 61, 0.10), 0 2px 5px -2px rgba(22, 33, 61, 0.05);
  --shadow-lg: 0 14px 32px -12px rgba(22, 33, 61, 0.18), 0 6px 14px -6px rgba(22, 33, 61, 0.08);
  --ring: 0 0 0 3px rgba(22, 33, 61, 0.25);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 150ms var(--ease);

  /* ---- "The register" — marketing-page-specific tokens (register-view
     stamp/rule colours, and font-family aliases marketing.css itself uses
     under these names). Kept separate from the --color-* and --font-sans
     tokens above even though the values now match, so marketing.css's
     existing rules don't need editing when this file changes again. ---- */
  --mkt-ink: #16213d;
  --mkt-ink-muted: #55617a;
  --mkt-ink-faint: #8791a3;
  --mkt-paper: #faf9f5;
  --mkt-panel: #ffffff;
  --mkt-rule: #d9d3c4;
  --mkt-rule-strong: #b9b19c;
  --mkt-stamp: #9c2b2b;
  --mkt-stamp-dark: #7a2020;
  --mkt-verified: #1e5631;
  --mkt-verified-bg: #e6efe8;

  --font-serif: var(--font-sans);
  --font-register: var(--font-sans);
}