/* WagerWiener design tokens — SPEC-002 §2/§3/§4. Single source of truth. */
:root {
  /* Brand */
  --field-green: #0b3d2e;
  --field-deep: #072318;
  --gold: #d4af37;
  --gold-bright: #e9c65a;
  --bone: #f8f5e9;
  --midnight: #0b0b0b;
  --dawg: #b05e2e;

  /* Surfaces */
  --ink: #05100b;
  --surface: #0d2a20;
  --surface-2: #113626;
  --line: rgba(248, 245, 233, 0.14);
  --line-strong: rgba(248, 245, 233, 0.26);

  /* Text */
  --text: #f8f5e9;
  --text-muted: rgba(248, 245, 233, 0.66);
  --text-faint: rgba(248, 245, 233, 0.58); /* 6.4:1 on --ink — WCAG AA for 12px text */

  /* Semantic */
  --win: #3ddc84;
  --loss: #e2564f;

  /* Type */
  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-hero: clamp(2.875rem, 7.2vw, 6rem);
  --text-title: clamp(2rem, 4.6vw, 3.5rem);
  --text-sub: clamp(1.25rem, 2.2vw, 1.75rem);
  --text-body: clamp(1rem, 1.05vw, 1.125rem);
  --text-small: 0.9375rem;
  --text-label: 0.75rem;

  /* Space + layout */
  --maxw: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3.25rem, 6.5vw, 5.5rem);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 12px 40px rgba(212, 175, 55, 0.12);
}

@property --sweep-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}