/* =========================================================
   Space & Move — Design Tokens
   Source of truth: design-system.md
   ========================================================= */

:root {
  /* Color */
  --navy-900: #0E2A4D;
  --navy-700: #1B3F6E;
  --red-500: #C0392B;
  --red-600: #A6321F; /* hover state, derived — not in design system but needed for interaction feedback */
  --paper-50: #F7F6F2;
  --white: #FFFFFF;
  --ink-900: #1C1C1C;
  --ink-500: #5B6168;
  --line-200: #C8CDD4;
  --win-green: #2F7A4F;
  --loss-clay: #8B5A4A;

  /* Type — system font stacks only, no external font requests.
     Display face approximates the design system's condensed-grotesk
     intent (Archivo/Barlow Condensed) using font-stretch + letter-spacing
     on a bold system sans, rather than fetching a webfont. See
     design-system.md §2.2 changelog note for the reasoning. */
  --font-display: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.25rem;   /* 20px */
  --text-xl: 1.75rem;   /* 28px */
  --text-2xl: 2.5rem;   /* 40px */
  --text-3xl: 4rem;     /* 64px */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Shape */
  --radius-card: 12px;
  --radius-pill: 999px;

  /* Layout */
  --content-max: 1140px;
  --gutter: 24px;
}

/* =========================================================
   Reset (minimal, not opinionated beyond what's needed)
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

body {
  background: var(--paper-50);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Tabular numerals wherever numbers sit in a grid — design system §2.2 */
.tnum {
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Layout helpers
   ========================================================= */

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
}

/* =========================================================
   Accessibility baseline — design system §7
   ========================================================= */

:focus-visible {
  outline: 2px solid var(--red-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}