/* ==========================================================================
   Design Tokens & Luxury Color Themes
   ========================================================================== */

:root {
  /* Typography */
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-title: 'Cinzel', 'Plus Jakarta Sans', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Universal Transitions & Radii */
  --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Default Theme: Obsidian Noir */
  --bg-primary: #090b10;
  --bg-secondary: #0f131c;
  --bg-tertiary: #161b26;
  --surface-glass: rgba(22, 27, 38, 0.7);
  --surface-glass-border: rgba(255, 255, 255, 0.08);
  --surface-glass-hover: rgba(30, 38, 54, 0.85);

  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --accent-gold: #f59e0b;
  --accent-gold-glow: rgba(245, 158, 11, 0.35);
  --accent-blue: #38bdf8;
  --accent-blue-glow: rgba(56, 189, 248, 0.3);
  --accent-crimson: #ef4444;
  --accent-crimson-glow: rgba(239, 68, 68, 0.45);
  --accent-emerald: #10b981;

  /* Board Tiles: Obsidian Luxury */
  --tile-light: #d8e2dc;
  --tile-dark: #475569;
  --tile-border: #1e293b;
  --tile-last-move: rgba(245, 158, 11, 0.4);
  --tile-selected: rgba(56, 189, 248, 0.45);
  --tile-check: rgba(239, 68, 68, 0.55);

  /* Shadows */
  --shadow-board: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 24px rgba(56, 189, 248, 0.25);
}

/* Theme 2: Grandmaster Walnut (Warm Rich Wood) */
body[data-theme="walnut"] {
  --bg-primary: #120e0b;
  --bg-secondary: #1a1410;
  --bg-tertiary: #271e18;
  --surface-glass: rgba(39, 30, 24, 0.75);
  --surface-glass-border: rgba(245, 158, 11, 0.15);
  --surface-glass-hover: rgba(54, 42, 34, 0.9);

  --text-main: #fef3c7;
  --text-muted: #d97706;
  --text-dim: #92400e;

  --tile-light: #eedbc2;
  --tile-dark: #8b5a2b;
  --tile-border: #3d2614;
  --tile-last-move: rgba(217, 119, 6, 0.45);
  --tile-selected: rgba(245, 158, 11, 0.5);
}

/* Theme 3: Emerald Tournament (Classic Luxury) */
body[data-theme="emerald"] {
  --bg-primary: #061410;
  --bg-secondary: #0c201a;
  --bg-tertiary: #143229;
  --surface-glass: rgba(12, 32, 26, 0.75);
  --surface-glass-border: rgba(16, 185, 129, 0.2);
  --surface-glass-hover: rgba(20, 50, 41, 0.9);

  --text-main: #ecfdf5;
  --text-muted: #6ee7b7;
  --text-dim: #059669;

  --tile-light: #e8ede0;
  --tile-dark: #3b755d;
  --tile-border: #1b4332;
  --tile-last-move: rgba(251, 191, 36, 0.4);
  --tile-selected: rgba(52, 211, 153, 0.45);
}

/* Theme 4: Cyberpunk Neon */
body[data-theme="cyber"] {
  --bg-primary: #0a0518;
  --bg-secondary: #120b29;
  --bg-tertiary: #1f1345;
  --surface-glass: rgba(18, 11, 41, 0.8);
  --surface-glass-border: rgba(168, 85, 247, 0.3);
  --surface-glass-hover: rgba(31, 19, 69, 0.95);

  --text-main: #faf5ff;
  --text-muted: #c084fc;
  --text-dim: #7e22ce;

  --tile-light: #2a1b4e;
  --tile-dark: #110726;
  --tile-border: #3b0764;
  --tile-last-move: rgba(244, 63, 94, 0.45);
  --tile-selected: rgba(6, 182, 212, 0.5);
  --shadow-board: 0 0 50px rgba(168, 85, 247, 0.3), 0 25px 60px rgba(0, 0, 0, 0.9);
}