/* WiBet — Caribbean × Sportsbook design tokens */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.4rem + 4.5vw, 5rem);
  --text-hero: clamp(2.5rem, 0.5rem + 5.2vw, 5rem);

  /* Spacing — 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Caribbean × Sportsbook palette */
  --c-midnight: #07111F;
  --c-midnight-2: #0B1A2E;
  --c-night: #0E2238;
  --c-deep: #122B45;
  --c-surface: #15314f;
  --c-line: rgba(255,255,255,0.08);
  --c-line-strong: rgba(255,255,255,0.14);

  --c-text: #F2EFE6;
  --c-text-muted: rgba(242,239,230,0.66);
  --c-text-faint: rgba(242,239,230,0.40);

  --c-teal: #14C7AD;            /* Caribbean sea */
  --c-teal-deep: #0E9B89;
  --c-teal-soft: rgba(20,199,173,0.16);
  --c-coral: #FF6B4A;            /* sunset */
  --c-coral-deep: #E04F2F;
  --c-coral-soft: rgba(255,107,74,0.14);
  --c-gold: #F5C44E;             /* trophy */
  --c-gold-deep: #D8A52E;
  --c-gold-soft: rgba(245,196,78,0.16);
  --c-magenta: #E64A8A;
  --c-violet: #6B5BFF;

  --c-up: #14C7AD;
  --c-down: #FF6B4A;
  --c-warn: #F5C44E;

  /* Semantic */
  --color-bg: var(--c-midnight);
  --color-surface: var(--c-midnight-2);
  --color-surface-2: var(--c-night);
  --color-surface-3: var(--c-deep);
  --color-text: var(--c-text);
  --color-text-muted: var(--c-text-muted);
  --color-primary: var(--c-teal);

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.5);
  --shadow-glow-teal: 0 0 40px rgba(20,199,173,0.25);
  --shadow-glow-gold: 0 0 50px rgba(245,196,78,0.22);

  /* Transitions */
  --t-fast: 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-base: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-slow: 480ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Fonts */
  --font-display: "Boldonse", "Clash Display", "Anton", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Layout */
  --container: 1280px;
  --container-narrow: 880px;
}