:root {
  /* One neutral ramp drives the whole UI. Anything that isn't text or a border
     picks a step from here rather than inventing a colour. */
  --grey-50: #fafafa;
  --grey-100: #f4f4f5;
  --grey-200: #e8e8ea;
  --grey-300: #d6d6da;
  --grey-400: #a8a8b0;
  --grey-500: #78787f;
  --grey-600: #56565d;
  --grey-700: #3d3d43;
  --grey-800: #27272b;
  --grey-900: #18181b;

  --color-bg: var(--grey-100);
  --color-surface: #ffffff;
  --color-surface-alt: var(--grey-50);
  --color-border: var(--grey-200);
  --color-border-strong: var(--grey-300);

  --color-text: var(--grey-900);
  --color-text-soft: var(--grey-600);
  --color-muted: var(--grey-500);

  /* The "brand" is graphite. Buttons and the header are near-black, so the only
     saturated colour in the app is a status signal. */
  --color-primary: var(--grey-900);
  --color-primary-dark: #000000;

  /* Status accents, desaturated so they read as part of the grey scheme rather
     than as decoration. */
  --color-success: #2f6f4f;
  --color-warning: #8a6218;
  --color-danger: #9b2c2c;
  --color-danger-bg: #fdf4f4;
  --color-danger-border: #f0d9d9;

  /* Charts. A single-series bar is graphite like everything else — the two
     series hues exist only where two things must be told apart (the two players
     in a head-to-head), and they are a validated colourblind-safe pair. The aqua
     sits below 3:1 on white, so every bar is labelled with its value and every
     series is named: nothing on a chart is readable by colour alone. */
  --chart-bar: var(--grey-700);
  --chart-track: var(--grey-100);
  --chart-series-1: #2a78d6;
  --chart-series-2: #1baf7a;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-md: 0.9375rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.75rem;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgb(24 24 27 / 5%);
  --shadow-md: 0 4px 16px -4px rgb(24 24 27 / 12%);
  --shadow-lg: 0 12px 32px -8px rgb(24 24 27 / 18%);

  --z-header: 10;
  --z-toast: 20;

  --ring: 0 0 0 3px rgb(24 24 27 / 12%);
  --transition: 140ms ease;

  /* Custom properties don't work inside @media, so this is documentation: every
     breakpoint in the app hardcodes 768px to match it. */
  --breakpoint-md: 768px;
}