/* Athletic Stats design tokens — Modernist system (Claude Design handoff, 2026-09-01) mapped onto the site's token names.
   Light is the designed theme; dark is derived from the same ramps (dark mode is not optional on this site). */
:root {
  --color-bg: #f3f2f2; --color-surface: #eae9e9; --color-text: #201e1d; --color-accent: #ec3013;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --color-neutral-100: #f8f4f4; --color-neutral-200: #eae7e7; --color-neutral-300: #d7d3d3; --color-neutral-400: #bab6b6; --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979; --color-neutral-700: #605d5d; --color-neutral-800: #444141; --color-neutral-900: #2d2b2b;
  --color-accent-100: #fff2ef; --color-accent-200: #ffe0d9; --color-accent-300: #ffc4b8; --color-accent-400: #ff9783; --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f; --color-accent-700: #ae1800; --color-accent-800: #7c1405; --color-accent-900: #4d170e;
  --color-accent-text: var(--color-accent-700);   /* accent for text ≤ 13px (readme: deep step on a light ground) */
  --color-wr-row: var(--color-accent-100);

  /* site token names used by the existing templates */
  --bg: var(--color-bg); --surface: var(--color-surface); --surface-subtle: var(--color-neutral-200); --surface-strong: var(--color-neutral-300);
  --text: var(--color-text); --text-muted: var(--color-neutral-700); --text-subtle: var(--color-neutral-600);
  --border: var(--color-divider); --border-strong: var(--color-divider);
  --accent: var(--color-accent); --accent-hover: var(--color-accent-600); --accent-soft: var(--color-accent-100);
  --positive: #2d6a3e; --warning: #8a5a00; --negative: var(--color-accent-700);
  --family-sprints: var(--color-accent-text); --family-middle: var(--color-accent-text); --family-distance: var(--color-accent-text); --family-hurdles: var(--color-accent-text);
  --family-jumps: var(--color-accent-text); --family-throws: var(--color-accent-text); --family-combined: var(--color-accent-text); --family-road: var(--color-accent-text); --family-walk: var(--color-accent-text);
  --chart-grid: var(--color-neutral-300); --chart-axis: var(--color-neutral-700); --chart-primary: var(--color-neutral-800); --chart-secondary: var(--color-neutral-500); --chart-marker: var(--color-accent);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-pill: 0;
  --page-max: 1280px; --content-max: 1280px; --reading-max: 62ch; --page-pad: clamp(20px, 5vw, 72px);
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --font-heading: var(--font); --font-body: var(--font);
  --shadow-pop: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #191817; --color-surface: #232120; --color-text: #f3f2f2; --color-accent: #ff6a50;
    --color-divider: color-mix(in srgb, #f3f2f2 32%, transparent);
    --color-neutral-100: #2d2b2b; --color-neutral-200: #353232; --color-neutral-300: #444141; --color-neutral-400: #605d5d; --color-neutral-500: #7d7979;
    --color-neutral-600: #9b9797; --color-neutral-700: #bab6b6; --color-neutral-800: #d7d3d3; --color-neutral-900: #eae7e7;
    --color-accent-100: #3a1a14; --color-accent-200: #4d170e; --color-accent-300: #7c1405; --color-accent-400: #dd2b0f; --color-accent-500: #ff563c;
    --color-accent-600: #ff7a63; --color-accent-700: #ff9783; --color-accent-800: #ffc4b8; --color-accent-900: #ffe0d9;
    --color-accent-text: var(--color-accent-700); --color-wr-row: #2a1c19;
    --accent-hover: var(--color-accent-600); --positive: #7fd39a; --warning: #e6b84b;
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg: #191817; --color-surface: #232120; --color-text: #f3f2f2; --color-accent: #ff6a50;
  --color-divider: color-mix(in srgb, #f3f2f2 32%, transparent);
  --color-neutral-100: #2d2b2b; --color-neutral-200: #353232; --color-neutral-300: #444141; --color-neutral-400: #605d5d; --color-neutral-500: #7d7979;
  --color-neutral-600: #9b9797; --color-neutral-700: #bab6b6; --color-neutral-800: #d7d3d3; --color-neutral-900: #eae7e7;
  --color-accent-100: #3a1a14; --color-accent-200: #4d170e; --color-accent-300: #7c1405; --color-accent-400: #dd2b0f; --color-accent-500: #ff563c;
  --color-accent-600: #ff7a63; --color-accent-700: #ff9783; --color-accent-800: #ffc4b8; --color-accent-900: #ffe0d9;
  --color-accent-text: var(--color-accent-700); --color-wr-row: #2a1c19;
  --accent-hover: var(--color-accent-600); --positive: #7fd39a; --warning: #e6b84b;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
.family-sprints, .family-middle-distance, .family-distance, .family-hurdles-steeplechase, .family-jumps, .family-throws, .family-combined-events, .family-road-running, .family-race-walking, body { --family: var(--color-accent-text); }