/**
 * Accessible Athletic Minimal — v1 design tokens.
 * Tune colour here. Do not hardcode hex values in components.
 */
:root {
  --font-sans: system-ui, -apple-system, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --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;

  --gutter: var(--space-5);
  --section-gap: var(--space-8);
  --related-gap: var(--space-3);
  --group-gap: var(--space-5);
  --pad-card: var(--space-5);

  --radius-major: 16px;
  --radius-card: 14px;
  --radius-control: 12px;
  --radius-score: 12px;
  --score-skew: -4deg;
  --radius-pill: 999px;

  --border-width: 1px;

  --type-screen: 1.875rem; /* 30px */
  --type-status: 1.5rem;   /* 24px */
  --type-section: 1.3125rem; /* 21px */
  --type-important: 1.125rem; /* 18px */
  --type-body: 1.0625rem;  /* 17px */
  --type-secondary: 1rem;  /* 16px */
  --type-meta: 0.9375rem;  /* 15px */
  --type-nav: 0.9375rem;
  --type-score: 3rem;      /* 48px — large numeral inside ~80px tiles */
  --type-court: 3.75rem;   /* 60px */
  --type-floor: 0.875rem;  /* 14px — never go below */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.45;

  --touch-min: 48px;
  --touch-button: 56px;
  --touch-primary: 60px;
  --touch-score: 80px;
  --touch-nav: 60px;

  --motion: 200ms;
  --motion-fast: 150ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --tabbar-height: calc(var(--touch-nav) + env(safe-area-inset-bottom, 0px));
}

/* Dark is the primary brand experience. */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0D1211;
  --surface: #151B19;
  --surface-raised: #1B2320;
  --border: #2A3531;
  --text: #F4F1EA;
  --text-secondary: #B9C0BC;
  --text-muted: #88918D;
  --teal: #1A6E67;
  --teal-hi: #5DCFC0;
  --gold: #C8A15A;
  --error: #D66A6A;
  --warning: #D0A15B;
  --on-teal: #F4F1EA;
  --focus: var(--teal-hi);
  --active-ring: #2A9E91;
  --scrim: rgba(7, 10, 9, 0.72);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F1EA;
  --surface: #FFFFFF;
  --surface-raised: #F7F7F3;
  --border: #CCD3CE;
  --text: #141A18;
  --text-secondary: #56605C;
  --text-muted: #4E5754;
  --teal: #0C6B64;
  --teal-hi: #0B5F58;
  --gold: #7A5C24;
  --error: #B54A4A;
  --warning: #7A5418;
  --on-teal: #F4F1EA;
  --focus: var(--active-ring);
  --active-ring: #0F7E74;
  --scrim: rgba(20, 26, 24, 0.45);
}