/* Sideline · design tokens
 * Theme: Sport (light paper · display-condensed · warm team-red accent)
 * Every colour and font on the site comes from here.
 */
:root {
  color-scheme: light;

  /* Paper and ink, tinted warm toward the anchor (hue ~80) */
  --color-paper:      oklch(96.5% 0.012 85);
  --color-paper-2:    oklch(93.2% 0.015 85);
  --color-rule:       oklch(82% 0.012 80);
  --color-neutral:    oklch(50% 0.012 70);
  --color-muted:      oklch(38% 0.012 65);
  --color-ink:        oklch(19% 0.012 60);

  /* Dark band (specs, scoreboard) */
  --color-night:      oklch(19% 0.012 60);
  --color-night-2:    oklch(25% 0.012 60);
  --color-night-rule: oklch(34% 0.012 60);
  --color-night-ink:  oklch(94% 0.01 85);
  --color-night-mute: oklch(74% 0.012 80);

  /* Accent: home-team red. Keep it under ~5% of any view. */
  --color-accent:     oklch(55% 0.2 27);
  --color-accent-2:   oklch(48% 0.19 27);
  --color-focus:      oklch(55% 0.2 27);

  /* Illustration-only colours, matching Sideline's demo data */
  --color-away:       oklch(52% 0.19 262);
  --color-doubt:      oklch(72% 0.17 58);
  --color-kit-white:  oklch(98.5% 0.004 85);
  --color-skin:       oklch(76% 0.07 55);
  --color-field:      oklch(52% 0.12 148);
  --color-field-2:    oklch(48% 0.12 148);
  --color-boot:       oklch(19% 0.012 60);
  --color-star:       oklch(80% 0.16 85);

  /* Shadows are modifiers, not palette colours */
  --drop-window: drop-shadow(0 1.25rem 1.75rem oklch(19% 0.02 60 / 0.22)) drop-shadow(0 0.2rem 0.4rem oklch(19% 0.02 60 / 0.16));

  /* Type: Big Shoulders Display (display) + IBM Plex Sans (body) + IBM Plex Mono (data labels) */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Perfect-fourth scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.75rem;
  --text-2xl:  clamp(1.75rem, 1.5vw + 1.25rem, 2.5rem);
  --text-3xl:  clamp(2.25rem, 3vw + 1.25rem, 4rem);
  --text-display: clamp(3rem, 6vw + 1.25rem, 7rem);
  --text-numeral: clamp(4.5rem, 8vw + 2rem, 9.5rem);

  /* 4pt spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;
  --gutter:    clamp(1rem, 4vw, 3rem);

  --rule-hair:  1px;
  --rule-thick: 4px;
  --radius-sm: 4px;
  --radius-md: 8px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
}