/* ==========================================================================
   variables.css — Design Tokens (CSS Custom Properties)
   Mushroom Grove — Enchanted Forest Whack-a-Mole
   ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     Colors — Deep Teals
     ----------------------------------------------------------------------- */
  --color-teal-900: #0a1f1a;
  --color-teal-800: #0d2b24;
  --color-teal-700: #1a3d35;
  --color-teal-600: #245a4e;
  --color-teal-500: #2f7668;

  /* -----------------------------------------------------------------------
     Colors — Warm Ambers
     ----------------------------------------------------------------------- */
  --color-amber-400: #f4a825;
  --color-amber-500: #e8962e;
  --color-amber-600: #d4791c;
  --color-amber-700: #b86514;
  --color-amber-800: #8f4e0f;

  /* -----------------------------------------------------------------------
     Colors — Glowing Greens
     ----------------------------------------------------------------------- */
  --color-green-300: #3cff6e;
  --color-green-400: #2ed85a;
  --color-green-500: #1fb848;
  --color-green-600: #17943a;
  --color-green-700: #0f6e2b;

  /* -----------------------------------------------------------------------
     Colors — Soft Purples
     ----------------------------------------------------------------------- */
  --color-purple-400: #b06cc9;
  --color-purple-500: #9b59b6;
  --color-purple-600: #8e44ad;
  --color-purple-700: #7d3c98;
  --color-purple-800: #6c3483;

  /* -----------------------------------------------------------------------
     Colors — Danger / Bomb
     ----------------------------------------------------------------------- */
  --color-red-400: #ff6b6b;
  --color-red-500: #e74c3c;
  --color-red-600: #c0392b;
  --color-red-700: #962d22;

  /* -----------------------------------------------------------------------
     Colors — Gold / Special
     ----------------------------------------------------------------------- */
  --color-gold-300: #ffe066;
  --color-gold-400: #ffd700;
  --color-gold-500: #f0c420;
  --color-gold-600: #d4a800;

  /* -----------------------------------------------------------------------
     Colors — Backgrounds & Surfaces
     ----------------------------------------------------------------------- */
  --bg-body: #070f0c;
  --bg-primary: var(--color-teal-900);
  --bg-surface: var(--color-teal-800);
  --bg-surface-elevated: var(--color-teal-700);
  --bg-overlay: rgba(7, 15, 12, 0.85);
  --bg-hud: rgba(10, 31, 26, 0.75);
  --bg-panel: rgba(13, 43, 36, 0.92);

  /* -----------------------------------------------------------------------
     Colors — Text
     ----------------------------------------------------------------------- */
  --text-primary: #f5e6c8;
  --text-secondary: #c4b393;
  --text-muted: #8a7e6a;
  --text-white: #ffffff;
  --text-dark: #1a1208;

  /* -----------------------------------------------------------------------
     Colors — Glow Effects
     ----------------------------------------------------------------------- */
  --glow-green: rgba(60, 255, 110, 0.6);
  --glow-green-soft: rgba(60, 255, 110, 0.25);
  --glow-amber: rgba(244, 168, 37, 0.6);
  --glow-amber-soft: rgba(244, 168, 37, 0.25);
  --glow-purple: rgba(155, 89, 182, 0.6);
  --glow-purple-soft: rgba(155, 89, 182, 0.25);
  --glow-red: rgba(231, 76, 60, 0.6);
  --glow-red-soft: rgba(231, 76, 60, 0.2);
  --glow-gold: rgba(255, 215, 0, 0.7);
  --glow-gold-soft: rgba(255, 215, 0, 0.3);

  /* -----------------------------------------------------------------------
     Typography — Font Families
     ----------------------------------------------------------------------- */
  --font-display: 'MedievalSharp', cursive;
  --font-body: 'Nunito', system-ui, -apple-system, sans-serif;

  /* -----------------------------------------------------------------------
     Typography — Font Sizes (clamp for fluid scaling)
     ----------------------------------------------------------------------- */
  --text-xs: clamp(0.625rem, 0.55rem + 0.33vw, 0.75rem);       /* ~10-12px */
  --text-sm: clamp(0.75rem, 0.65rem + 0.44vw, 0.875rem);       /* ~12-14px */
  --text-base: clamp(0.875rem, 0.75rem + 0.55vw, 1rem);        /* ~14-16px */
  --text-md: clamp(1rem, 0.85rem + 0.66vw, 1.125rem);          /* ~16-18px */
  --text-lg: clamp(1.125rem, 0.95rem + 0.77vw, 1.375rem);      /* ~18-22px */
  --text-xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);         /* ~22-28px */
  --text-2xl: clamp(1.75rem, 1.35rem + 1.75vw, 2.5rem);        /* ~28-40px */
  --text-3xl: clamp(2.25rem, 1.6rem + 2.85vw, 3.5rem);         /* ~36-56px */
  --text-4xl: clamp(3rem, 2rem + 4.4vw, 5rem);                 /* ~48-80px */
  --text-countdown: clamp(5rem, 3.5rem + 6.6vw, 8rem);         /* ~80-128px */

  /* -----------------------------------------------------------------------
     Typography — Font Weights
     ----------------------------------------------------------------------- */
  --weight-normal: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* -----------------------------------------------------------------------
     Spacing — 4px base scale
     ----------------------------------------------------------------------- */
  --space-xs: 4px;        /* 4 */
  --space-sm: 8px;        /* 8 */
  --space-md: 12px;       /* 12 */
  --space-base: 16px;     /* 16 */
  --space-lg: 24px;       /* 24 */
  --space-xl: 32px;       /* 32 */
  --space-2xl: 48px;      /* 48 */
  --space-3xl: 64px;      /* 64 */

  /* -----------------------------------------------------------------------
     Timing — Animations & Transitions
     ----------------------------------------------------------------------- */
  --timing-sprite-pop: 300ms;
  --timing-sprite-retreat: 200ms;
  --timing-hit: 150ms;
  --timing-screen-transition: 400ms;
  --timing-popup: 600ms;
  --timing-particle: 500ms;
  --timing-combo: 300ms;
  --timing-countdown-beat: 700ms;
  --timing-firefly: 4000ms;

  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-retreat: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* -----------------------------------------------------------------------
     Z-Index — Layering System
     ----------------------------------------------------------------------- */
  --z-background: 0;
  --z-board: 10;
  --z-sprites: 20;
  --z-mushroom-cap: 30;
  --z-hud: 40;
  --z-popups: 50;
  --z-particles: 60;
  --z-overlay: 70;
  --z-screens: 80;
  --z-countdown: 90;

  /* -----------------------------------------------------------------------
     Border Radius
     ----------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* -----------------------------------------------------------------------
     Safe Area Insets
     ----------------------------------------------------------------------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* -----------------------------------------------------------------------
     Misc
     ----------------------------------------------------------------------- */
  --board-max-width: 400px;
  --board-gap: 10px;
  --hole-size: clamp(90px, 26vw, 120px);
  --hud-height: 56px;
  --blur-hud: 12px;
  --border-glow: 1px solid rgba(60, 255, 110, 0.15);
}