/* Designer: colours, type, spacing tokens.
   Palette: Swiss red and white, alpine slate, clay-court and ball accents.
   Contrast (WCAG AA): text #1b1f24 on #fff 16:1; white on red #c8102e 5.9:1;
   red #c8102e on white 5.9:1; muted #4a5563 on #fff 7.6:1; text on alpine #eef3f8 14:1. */
:root {
  --color-bg: #ffffff;
  --color-surface: #eef3f8;
  --color-text: #1b1f24;
  --color-muted: #4a5563;
  --color-accent: #c8102e;
  --color-accent-dark: #9b0c23;
  --color-on-accent: #ffffff;
  --color-alpine: #2f4a66;
  --color-clay: #b4532a;
  --color-ball: #d7e84a;
  --color-line: #d5dce4;
  --color-focus: #0b57d0;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* type scale (1.25 ratio) */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.563rem;
  --text-xl: 1.953rem;
  --text-2xl: 2.441rem;
  --text-3xl: 3.052rem;
  --leading-body: 1.6;
  --leading-heading: 1.15;

  --space: 1rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;
}