/* Design tokens: every colour, size and spacing value used by the site. */

:root {
  color-scheme: light dark;

  /* Colours (light) */
  --color-background: oklch(99% 0.003 250);
  --color-surface: oklch(96% 0.006 250);
  --color-text: oklch(22% 0.02 255);
  --color-text-muted: oklch(48% 0.02 255);
  --color-border: oklch(88% 0.01 255);
  --color-accent: oklch(48% 0.16 255);
  --color-highlight: oklch(94% 0.05 95);
  --color-live: oklch(55% 0.2 25);
  --color-shadow: oklch(22% 0.02 255 / 0.08);
  /* The front page email frame's window buttons (close, minimise, zoom), the same in light and dark mode. */
  --color-window-close: oklch(68% 0.2 25);
  --color-window-minimise: oklch(84% 0.16 85);
  --color-window-zoom: oklch(74% 0.18 145);

  /* Typography */
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-size-small: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --font-size-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --font-size-large: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --font-size-xlarge: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --font-weight-normal: 400;
  --font-weight-bold: 650;
  --line-height-tight: 1.2;
  --line-height-base: 1.55;
  --letter-spacing-caps: 0.04em;

  /* Spacing */
  --space-xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.3rem);
  --space-s: clamp(0.5rem, 0.45rem + 0.2vw, 0.625rem);
  --space-m: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  --space-l: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --space-xl: clamp(2rem, 1.6rem + 1.6vw, 3rem);

  /* Shapes and layout */
  --radius: 0.375rem;
  --border-width: 0.0625rem;
  --cut-width: 0.125rem;
  --zone-edge: 0.25rem;
  /* The page widens on desktop; prose and forms keep a readable width, and the email preview is wider, like a mail window. Every report section
     is one column; standings tables keep the narrow width. */
  --content-width: 80rem;
  --narrow-width: 46rem;
  --email-preview-width: 64rem;
  --prose-width: 42rem;
  --page-gutter: var(--space-m);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: oklch(18% 0.015 255);
    --color-surface: oklch(23% 0.018 255);
    --color-text: oklch(93% 0.008 250);
    --color-text-muted: oklch(70% 0.015 250);
    --color-border: oklch(33% 0.02 255);
    --color-accent: oklch(75% 0.12 250);
    --color-highlight: oklch(32% 0.05 95);
    --color-live: oklch(70% 0.17 25);
    --color-shadow: oklch(0% 0 0 / 0.35);
  }
}