/* ═══════════════════════════════════════════════════════
   GAME RECOGNIZE GAME — Design Tokens
   Single source of truth for all visual properties.
   Edit these values to reskin the entire deck.
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Background ── */
  --color-bg-dark: #0B0B0D;
  --color-bg-elevated: #15141A;
  --color-bg-glass: rgba(21, 20, 26, 0.72);

  /* ── Gold System ── */
  --color-gold-primary: #D4AF37;
  --color-gold-bright: #F2C744;
  --color-gold-deep: #8C6A1A;
  --color-gold-gradient: linear-gradient(135deg, var(--color-gold-deep), var(--color-gold-primary), var(--color-gold-bright));
  --color-gold-text-gradient: linear-gradient(135deg, var(--color-gold-deep) 0%, var(--color-gold-bright) 50%, var(--color-gold-primary) 100%);
  --color-gold-glow: rgba(212, 175, 55, 0.25);
  --color-gold-subtle: rgba(212, 175, 55, 0.08);

  /* ── Text ── */
  --color-white: #FFFFFF;
  --color-white-muted: rgba(255, 255, 255, 0.72);
  --color-white-dim: rgba(255, 255, 255, 0.48);

  /* ── Accent (use sparingly) ── */
  --color-red-accent: #E10F1F;
  --color-red-glow: rgba(225, 15, 31, 0.3);

  /* ── Typography ── */
  --font-display: 'Bebas Neue', 'Anton', 'Impact', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-numeric: 'Space Grotesk', 'SF Mono', monospace;

  /* ── Type Scale (fluid, clamp-based) ── */
  --text-hero: clamp(3.5rem, 8vw, 7rem);
  --text-section: clamp(2rem, 4vw, 3.5rem);
  --text-subsection: clamp(1.25rem, 2.5vw, 1.75rem);
  --text-body: clamp(0.95rem, 1.2vw, 1.125rem);
  --text-caption: clamp(0.75rem, 1vw, 0.875rem);
  --text-episode-num: clamp(2rem, 3vw, 3rem);

  /* ── Spacing ── */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;
  --section-padding: clamp(4rem, 10vh, 8rem);

  /* ── Layout ── */
  --max-width: 1280px;
  --nav-height: 72px;
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;

  /* ── Effects ── */
  --glass-blur: blur(20px);
  --glass-border: 1px solid rgba(212, 175, 55, 0.12);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-gold: 0 4px 24px rgba(212, 175, 55, 0.15);
  --shadow-red-inner: inset 0 0 20px rgba(225, 15, 31, 0.15);

  /* ── Transitions ── */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-snap: cubic-bezier(0.76, 0, 0.24, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 800ms;
}

/* ── Light Mode Overrides ── */
[data-theme="light"] {
  --color-bg-dark: #F5F3EE;
  --color-bg-elevated: #FFFFFF;
  --color-bg-glass: rgba(255, 255, 255, 0.82);
  --color-white: #0B0B0D;
  --color-white-muted: rgba(11, 11, 13, 0.72);
  --color-white-dim: rgba(11, 11, 13, 0.48);
  --color-gold-glow: rgba(212, 175, 55, 0.15);
  --color-gold-subtle: rgba(212, 175, 55, 0.05);
  --glass-border: 1px solid rgba(212, 175, 55, 0.2);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.08);
}