/* Design tokens: every shared colour, font, size and spacing value is defined here.
   Components use these variables and never write raw values. Sizes that belong to a
   single component (for example the 40px bucket swatch) stay in that component. */

:root {
  /* Surfaces */
  --color-paper: #fafbfd;
  --color-white: #ffffff;
  --color-white-translucent: rgba(255, 255, 255, 0.8);
  --color-ink: #0a0d13;
  --color-ink-soft: #272e3b;
  --color-placeholder: #4d5565;

  /* Brand: two colours, navy and teal (dark teal for small text) */
  --color-teal: #0d9488;
  --color-teal-dark: #0f766e;
  --color-navy: #14246b;
  --color-navy-pale: #c7d0ea;

  /* Risk colours: reserved for scores and findings, never decoration */
  --color-risk-critical: #ef4444;
  --color-risk-warning: #f59e0b;
  --color-risk-safe: #22c55e;
  /* Darker safe green for lines and small marks that need 3:1 or more (5.0:1 on white) */
  --color-risk-safe-dark: #15803d;
  --color-risk-neutral: #64748b;

  /* Font families */
  --font-heading: "DM Serif Display", Georgia, serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Font sizes */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;
  --font-size-hero: clamp(38px, 6vw, 68px);

  /* Font weights */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing scale (4px grid; the number is the size divided by 4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-20: 80px;
  --space-24: 96px;

  /* Shape */
  --border-width: 3px;
  --border-width-thin: 2px;
  --shadow-hard: 8px 8px 0 var(--color-ink);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Layout */
  --content-max-width: 1080px;
  --page-gutter: var(--space-4);
}