/* =============================================================================
   DESIGN TOKENS - Spooky Cute Arcade Theme
   ============================================================================= */

:root {
  /* -------------------------------------------------------------------------
     COLORS - Background Tiers
     ------------------------------------------------------------------------- */
  --bg-deep: #1A1625;
  --bg-surface: #2D2640;
  --bg-elevated: #3D3555;
  --bg-board: #252035;

  /* -------------------------------------------------------------------------
     COLORS - Text
     ------------------------------------------------------------------------- */
  --text-primary: #FFF5E6;
  --text-secondary: #C4B8D9;
  --text-muted: #7A6B8A;

  /* -------------------------------------------------------------------------
     COLORS - Accents (Playful, High Contrast)
     ------------------------------------------------------------------------- */
  --accent-primary: #FF6B9D;      /* Bubblegum pink - CTAs, killer glow */
  --accent-secondary: #7DD3FC;    /* Sky blue - info, hits, progress */
  --accent-success: #86EFAC;      /* Mint green - hit confirmation */
  --accent-danger: #FCA5A5;       /* Coral red - life lost, elimination */
  --accent-warning: #FDE047;      /* Lemon yellow - low lives warning */
  --accent-gold: #FFD93D;         /* Gold - winner crown, achievements */
  --accent-purple: #C084FC;       /* Purple - killer badge, special states */

  /* -------------------------------------------------------------------------
     COLORS - Player Palette (8 distinct, saturated, friendly)
     ------------------------------------------------------------------------- */
  --player-1: #FF6B9D;  /* Bubblegum */
  --player-2: #7DD3FC;  /* Sky */
  --player-3: #A3E635;  /* Lime */
  --player-4: #FB923C;  /* Tangerine */
  --player-5: #C084FC;  /* Grape */
  --player-6: #6EE7B7;  /* Mint */
  --player-7: #FDE047;  /* Sunshine */
  --player-8: #F87171;  /* Coral */

  /* -------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------- */
  --font-display: 'Fredoka One', cursive;
  --font-body: 'Nunito', sans-serif;

  /* Font sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 48px;
  --text-4xl: 64px;
  --text-5xl: 72px;
  --text-6xl: 96px;

  /* -------------------------------------------------------------------------
     SPACING
     ------------------------------------------------------------------------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* -------------------------------------------------------------------------
     BORDER RADII (Rounded, Friendly)
     ------------------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* -------------------------------------------------------------------------
     SHADOWS (Soft, Layered, Sticker-Pop)
     ------------------------------------------------------------------------- */
  --shadow-sm: 0 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 0 rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 6px 0 rgba(0, 0, 0, 0.3);
  --shadow-glow-pink: 0 0 24px rgba(255, 107, 157, 0.5);
  --shadow-glow-gold: 0 0 24px rgba(255, 217, 61, 0.6);
  --shadow-glow-purple: 0 0 20px rgba(192, 132, 252, 0.5);

  /* -------------------------------------------------------------------------
     BORDERS (Thick Outlines)
     ------------------------------------------------------------------------- */
  --border-thin: 2px solid;
  --border-thick: 4px solid;
  --border-chunky: 6px solid;

  /* -------------------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------------------- */
  --transition-fast: 150ms ease-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 400ms ease-in-out;
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}