/* Design tokens. The only stylesheet that may contain a colour literal.
   Loaded before every other sheet on every page. Semantic names only:
   a rule says what a colour is for, never which palette entry it is.
   DESIGN_SYSTEM_PLAN.md phase 1. Type and space tokens are defined here
   and adopted by the type/page-frame phase. */
:root {
  /* Surfaces */
  --surface-page: #f7f9fc;
  --surface-card: #ffffff;
  --surface-soft: #eef2f6;
  --surface-strong: #dde5ec;
  --surface-inverse: #17212b;
  --surface-inverse-soft: #202a34;
  --surface-translucent: rgb(255 255 255 / 96%);
  --surface-glass: rgb(255 255 255 / 65%);

  /* Text. The type phase collapses heading/strong/text to the plan's three. */
  --text-heading: #17212b;
  --text-strong: #253342;
  --text: #334155;
  --text-muted: #5b6876;
  --text-muted-soft: #6b7785;
  --text-on-primary: #ffffff;
  --text-on-inverse: #ffffff;
  --text-on-inverse-soft: #d7dee5;

  /* Lines */
  --line: #d7dee5;
  --line-soft: #e5eaf0;
  --line-strong: #8492a2;

  /* Brand and actions. The wordmark's two halves come from the mark: its navy body, and its
     folded corner darkened from #0098db so the lighter half still clears 4.5:1 as text. */
  --brand: #023160;
  --brand-accent: #0072a4;
  --primary: #0c6f69;
  --primary-hover: #005a56;
  --primary-disabled: #e5e7eb;
  --primary-soft: #e8f4f3;
  --link: #164c7e;
  --focus: #155eef;
  --focus-strong: #1247b8;
  --focus-deep: #103c95;
  --focus-ring: rgb(21 94 239 / 14%);

  /* Status */
  --success: #176b43;
  --success-soft: #eaf7ef;
  --success-line: #9dd5b4;
  --warning: #8a3b0a;
  --warning-bright: #d97706;
  --warning-soft: #fff7e6;
  --warning-line: #f5c469;
  --error: #b42318;
  --error-strong: #991b1b;
  --error-soft: #fef3f2;
  --info: #164c7e;
  --info-soft: #e8f1ff;
  --info-line: #93c5fd;
  --accent: #7c3aed;

  /* Audit severity, one step darker per level */
  --severity-critical: var(--error-strong);
  --severity-serious: #9a3412;
  --severity-moderate: var(--warning);
  --severity-minor: var(--text-muted);

  /* The landing page's exploded PDF stack. One soft plane tint and one line per layer,
     named for the layer it stands for. Lines carry no text, only a 1 px plane edge and the
     marker beside a label that already says the same thing in words. */
  --layer-settings: rgb(71 85 105 / 10%);
  --layer-settings-line: #475569;
  --layer-tags: rgb(190 24 93 / 9%);
  --layer-tags-line: #be185d;
  --layer-headings: rgb(180 83 9 / 10%);
  --layer-headings-line: #b45309;
  --layer-order: rgb(21 128 61 / 10%);
  --layer-order-line: #15803d;
  --layer-text: rgb(29 78 216 / 9%);
  --layer-text-line: #1d4ed8;
  --layer-tables: rgb(109 40 217 / 9%);
  --layer-tables-line: #6d28d9;
  --layer-links: rgb(13 148 136 / 11%);
  --layer-links-line: #0f766e;
  --layer-figures: rgb(234 88 12 / 10%);
  --layer-figures-line: #c2410c;

  /* Translucent overlays drawn over page images */
  --overlay-neutral: rgb(74 85 104 / 8%);
  --overlay-neutral-line: rgb(74 85 104 / 62%);
  --overlay-warning: rgb(217 119 6 / 13%);
  --overlay-error: rgb(185 28 28 / 13%);
  --overlay-accent: rgb(124 58 237 / 12%);
  --scrim: rgb(23 33 43 / 58%);
  --scrim-light: rgb(23 33 43 / 35%);
  --shadow-color-soft: rgb(23 33 43 / 6%);
  --shadow-color: rgb(23 33 43 / 12%);
  --shadow-color-strong: rgb(23 33 43 / 24%);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Space, 4-point scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* Type */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;

  /* Layout */
  --content-narrow: 720px;
  --content: 860px;
  --content-wide: 1200px;
}