:root {
  /* paper — warm bulletin stock */
  --paper: #f6f2ea;
  --paper-deep: #efe9dd;
  --surface: #fdfcf9;
  --surface-2: #f7f4ec;

  /* ink — cool navy family, used consistently */
  --ink: #0d1f31;
  --ink-2: #17334d;
  --ink-muted: #57606a;
  --line: #ddd8cc;
  --line-strong: #c4bdac;

  /* accent — single restrained blue */
  --accent: #14618f;
  --accent-hover: #0f4f75;
  --accent-soft: #e3edf3;
  --focus: #b03a2e;

  /* verdict tones — see spec §"Tone system (locked)" */
  --danger: #b03a2e;  --danger-bg: #f8e7e2;
  --neutral: #57606a; --neutral-bg: #eeeade;

  /* shadows — tinted with the ink hue, never pure black */
  --shadow-sm: 0 1px 2px rgb(13 31 49 / 0.07);
  --shadow-md: 0 2px 6px rgb(13 31 49 / 0.08), 0 8px 24px -8px rgb(13 31 49 / 0.18);

  /* geometry */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* typography — sans-only (Outfit für Display und UI, IBM Plex Mono für Tabularziffern).
   * Schriften sind selbstgehostet; siehe css/fonts.css.
   */
  --font-display: var(--font-ui);
  --font-ui: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-base: 17px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 40px;
  --line-base: 1.6;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-hover: 180ms;
  --dur-press: 120ms;

  /* spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 30px;
  --space-7: 44px;

  /* z-index scale */
  --z-toolbar: 20;
  --z-overlay: 30;
  --z-skip: 100;
}