/* ============================================================
   QUIZ PVP — Design Tokens
   Dark gaming environment · THINK FAST. PLAY HARD.
   Loaded AFTER style.css so it owns the cascade for every page.
   ============================================================ */

:root,
[data-theme="dark"],
[data-theme="light"] {

  /* ---- Brand ---- */
  --color-primary: #2864FF;
  --color-primary-hover: #4C7DFF;
  --color-primary-soft: rgba(40, 100, 255, 0.14);
  --color-secondary: #00E5FF;
  --color-secondary-soft: rgba(0, 229, 255, 0.12);
  --color-accent: #00E5FF;
  --color-accent-soft: rgba(0, 229, 255, 0.12);
  --color-electric: #4C7DFF;

  /* ---- Semantic ---- */
  --color-success: #00FF85;
  --color-success-soft: rgba(0, 255, 133, 0.12);
  --color-warning: #FFD21F;
  --color-warning-soft: rgba(255, 210, 31, 0.12);
  --color-danger: #FF1744;
  --color-danger-soft: rgba(255, 23, 68, 0.12);

  /* ---- Gaming palette ---- */
  --bg-primary: #060810;
  --bg-secondary: #0A0F1C;
  --surface: #101726;
  --surface-elevated: #151E31;
  --surface-glass: rgba(12, 18, 32, 0.65);

  --accent-blue: #2864FF;
  --accent-cyan: #00E5FF;
  --accent-electric: #4C7DFF;
  --accent-gold: #FFD21F;
  --reward-gold: #FFB800;
  --rgb-red: #FF1744;
  --rgb-green: #00FF85;
  --white: #F5F7FF;
  --muted: #8B96AA;

  /* ---- Surfaces (aliases consumed by existing components) ---- */
  --color-bg: #060810;
  --color-surface: #101726;
  --color-surface-2: #151E31;
  --color-surface-3: #1A2440;
  --color-on-primary: #060810;

  /* ---- Text ---- */
  --color-text: #F5F7FF;
  --color-text-2: #AEB8CB;
  --color-text-3: #8B96AA;

  /* ---- Lines ---- */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --border-hairline: rgba(255, 255, 255, 0.08);

  /* ---- Gradients ---- */
  --gradient-brand: linear-gradient(135deg, #2864FF 0%, #00E5FF 100%);
  --gradient-gold: linear-gradient(135deg, #FFD21F 0%, #FFB800 100%);
  --gradient-danger: linear-gradient(135deg, #FF1744 0%, #FF6B3D 100%);
  --gradient-cyan: linear-gradient(135deg, #00E5FF 0%, #2864FF 100%);
  --gradient-surface: linear-gradient(180deg, #151E31 0%, #101726 100%);

  /* ---- Typography ---- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Rajdhani', 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  /* ---- Spacing scale (kept from legacy) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---- Elevation + glows ---- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 28px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 28px 60px -16px rgba(0, 0, 0, 0.75);
  --shadow-brand: 0 12px 30px -10px rgba(40, 100, 255, 0.55);
  --glow-blue: 0 0 24px rgba(40, 100, 255, 0.45);
  --glow-cyan: 0 0 24px rgba(0, 229, 255, 0.4);
  --glow-gold: 0 0 28px rgba(255, 210, 31, 0.45);
  --glow-green: 0 0 24px rgba(0, 255, 133, 0.4);
  --glow-red: 0 0 24px rgba(255, 23, 68, 0.4);

  /* ---- Motion ---- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 420ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layout ---- */
  --container: 1240px;
  --header-h: 72px;
  --z-header: 100;
  --z-fab: 250;
  --z-modal: 300;
  --z-toast: 400;

  /* ---- Difficulty ---- */
  --diff-easy: #00FF85;
  --diff-medium: #FFD21F;
  --diff-hard: #FF6B3D;
  --diff-expert: #FF1744;

  /* ---- Glass ---- */
  --glass-bg: rgba(12, 18, 32, 0.65);
  --glass-blur: 18px;
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);

  /* ---- Breakpoints ---- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}