@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg: #0a0d0b;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.09);
  --border-hover: rgba(52, 211, 153, 0.4);

  --ink: #f5f3ee;
  --ink-dim: #8b9490;

  --turf: #34d399;
  --turf-glow: rgba(52, 211, 153, 0.22);
  --pink: #ff3d81;
  --pink-glow: rgba(255, 61, 129, 0.22);

  --win: #34d399;
  --draw: #eab308;
  --loss: #ef4444;

  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}