/* ==========================================================================
   Okka Game Tools (OGT) — Design Tokens & Theme Palettes
   Supports dynamic game-specific theming (Ninja Heroes, Pirate Heroes, etc.)
   ========================================================================== */

/* Ninja Theme Tokens (Default) */
:root,
html[data-theme="ninja"] {
  --theme-accent: #a78bfa;
  --theme-accent2: #c4b5fd;
  --theme-accent-glow: rgba(167, 139, 250, 0.35);
  --theme-accent-gradient: linear-gradient(135deg, #a78bfa, #818cf8);
  --theme-border: #a78bfa;
  --theme-border-dim: rgba(167, 139, 250, 0.32);
  --theme-on-accent: #2e1065;
  --theme-header-gradient: radial-gradient(ellipse at top, rgba(167, 139, 250, 0.09) 0%, transparent 52%),
    radial-gradient(ellipse at bottom right, rgba(59, 130, 246, 0.07) 0%, transparent 58%);
}

html[data-mode="light"],
html[data-theme="ninja"][data-mode="light"] {
  --theme-accent: #7c3aed;
  --theme-accent2: #8b5cf6;
  --theme-accent-glow: rgba(124, 58, 237, 0.20);
  --theme-accent-gradient: linear-gradient(135deg, #7c3aed, #6366f1);
  --theme-border: #8b5cf6;
  --theme-border-dim: rgba(124, 58, 237, 0.26);
  --theme-on-accent: #ffffff;
  --theme-header-gradient: radial-gradient(ellipse at top, rgba(167, 139, 250, 0.12) 0%, transparent 52%),
    radial-gradient(ellipse at bottom right, rgba(59, 130, 246, 0.06) 0%, transparent 58%);
}

/* Pirate Theme Tokens */
html[data-theme="pirate"] {
  --theme-accent: #e7b84b;
  --theme-accent2: #ffd978;
  --theme-accent-glow: rgba(231, 184, 75, 0.35);
  --theme-accent-gradient: linear-gradient(135deg, #e7b84b, #ffd978);
  --theme-border: #e7b84b;
  --theme-border-dim: rgba(231, 184, 75, 0.32);
  --theme-on-accent: #2b1a05;
  --theme-header-gradient: radial-gradient(ellipse at top, rgba(56, 189, 248, 0.10) 0%, transparent 52%),
    radial-gradient(ellipse at bottom right, rgba(234, 179, 8, 0.06) 0%, transparent 58%);
}

html[data-theme="pirate"][data-mode="light"] {
  --theme-accent: #b7791f;
  --theme-accent2: #d29b32;
  --theme-accent-glow: rgba(183, 121, 31, 0.22);
  --theme-accent-gradient: linear-gradient(135deg, #b7791f, #d29b32);
  --theme-border: #b7791f;
  --theme-border-dim: rgba(183, 121, 31, 0.30);
  --theme-on-accent: #fffaf0;
  --theme-header-gradient: radial-gradient(ellipse at top, rgba(2, 132, 199, 0.12) 0%, transparent 52%),
    radial-gradient(ellipse at bottom right, rgba(234, 179, 8, 0.05) 0%, transparent 58%);
}

:root {
  /* Dark Mode Tokens (Default) */
  --bg: #0a0f1a;
  --card: rgba(15, 23, 42, 0.95);
  --card-solid: #0f172a;
  --card-hover: rgba(30, 41, 59, 0.98);
  --accent: var(--theme-accent);
  --accent2: var(--theme-accent2);
  --accent-glow: var(--theme-accent-glow);
  --accent-gradient: var(--theme-accent-gradient);
  --text: #e8f4fc;
  --muted: #8ba3b8;
  --border: var(--theme-border);
  --border-dim: var(--theme-border-dim);
  --on-accent: var(--theme-on-accent);
  --panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.65), inset 0 0 15px rgba(167, 139, 250, 0.12);

  /* Element / Chakra Colors */
  --fire: #ef4444;
  --wind: #22c55e;
  --lightning: #c026d3;
  --earth: #d97706;
  --water: #0ea5e9;

  --power: #ef4444;
  --speed: #a855f7;
  --technique: #facc15;
  --wisdom: #0891b2;

  /* Scrollbar Tokens */
  --scrollbar-size: 8px;
  --scrollbar-track: rgba(15, 23, 42, 0.4);
  --scrollbar-thumb: color-mix(in srgb, var(--accent) 50%, #334155);
  --scrollbar-thumb-hover: var(--accent);

  /* Spacing & Layout */
  --page-gutter: clamp(12px, 2vw, 24px);
  --max-width: 1400px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Mode Overrides */
html[data-mode="light"] {
  --bg: #f7f5ff;
  --card: rgba(255, 255, 255, 0.97);
  --card-solid: #ffffff;
  --card-hover: rgba(245, 243, 255, 0.99);
  --accent: var(--theme-accent);
  --accent2: var(--theme-accent2);
  --accent-glow: var(--theme-accent-glow);
  --accent-gradient: var(--theme-accent-gradient);
  --text: #241b3a;
  --muted: #6b6480;
  --border: var(--theme-border);
  --border-dim: var(--theme-border-dim);
  --on-accent: var(--theme-on-accent);
  --panel-shadow: 0 8px 28px rgba(46, 16, 101, 0.12), inset 0 0 12px rgba(167, 139, 250, 0.08);

  /* Scrollbar Light Mode Tokens */
  --scrollbar-track: rgba(0, 0, 0, 0.05);
  --scrollbar-thumb: color-mix(in srgb, var(--accent) 45%, #cbd5e1);
  --scrollbar-thumb-hover: var(--accent);
}