/* ⚠️  GENERATED — do not edit. Source: design/tokens.json + design/build.mjs · Regenerate: npm run design:build */
:root {
  /* Palette. Every colour in the design, and the only place a hex may appear. */
  --night: #06170F;
  --turf: #0D2A1C;
  --turf-shade: #0A2116;
  --turf-lit: #153F2A;
  --chalk: #EEF3EA;
  --flood: #FFC245;
  --signal: #6BA6FF;
  --offside: #FF5A4E;
  --workbench: #101314;

  /* RGB channels, so a token can be used at any opacity: rgb(var(--chalk-rgb) / .15) */
  --night-rgb: 6 23 15;
  --turf-rgb: 13 42 28;
  --turf-shade-rgb: 10 33 22;
  --turf-lit-rgb: 21 63 42;
  --chalk-rgb: 238 243 234;
  --flood-rgb: 255 194 69;
  --signal-rgb: 107 166 255;
  --offside-rgb: 255 90 78;
  --workbench-rgb: 16 19 20;

  /* The chalk-opacity ladder. */
  --line: rgb(var(--chalk-rgb) / 0.2);
  --line-soft: rgb(var(--chalk-rgb) / 0.1);
  --muted: rgb(var(--chalk-rgb) / 0.62);
  --faint: rgb(var(--chalk-rgb) / 0.4);
  --card-fill: rgb(var(--night-rgb) / 0.45);
  --card-border: var(--line);

  /* Three faces, three jobs — see design/tokens.json for which. */
  --font-display: "Big Shoulders Display", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Recipes. */
  --chalk-rule: repeating-linear-gradient(90deg, var(--line) 0 22px, transparent 22px 32px);
  --turf-stripes-banner: repeating-linear-gradient(180deg, rgba(255,255,255,0.02) 0 96px, transparent 96px 192px);
  --turf-stripes-site: repeating-linear-gradient(180deg, rgba(255,255,255,0.03) 0 150px, transparent 150px 300px), repeating-linear-gradient(90deg, rgba(0,0,0,0.1) 0 3px, transparent 3px 9px);
  --turf-stripes-pitch: repeating-linear-gradient(180deg, rgba(255,255,255,0.03) 0 64px, transparent 64px 128px), repeating-linear-gradient(90deg, rgba(0,0,0,0.1) 0 3px, transparent 3px 9px);
}