/* theme.css — CSS custom properties: colors, gradients, fonts, spacing */

:root {
  /* ── Core palette ── */
  --color-bg-primary: #0f0f1a;
  --color-bg-secondary: #1a1a2e;
  --color-bg-tertiary: #16213e;
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-surface-hover: rgba(255, 255, 255, 0.1);

  /* ── Accent colors ── */
  --color-accent-blue: #3b82f6;
  --color-accent-purple: #a855f7;
  --color-accent-orange: #f97316;
  --color-accent-green: #22c55e;
  --color-accent-red: #ef4444;
  --color-accent-cyan: #06b6d4;

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #a855f7 100%);
  --gradient-warm: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  --gradient-cool: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  --gradient-bg: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);

  /* ── Text colors ── */
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-accent: var(--color-accent-blue);
  --color-text-on-accent: #ffffff;

  /* ── Glassmorphism ── */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: 12px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  /* ── Spacing scale ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* ── Border radius ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ── Typography ── */
  --font-display: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;

  --text-xs: clamp(0.7rem, 1.5vw, 0.75rem);
  --text-sm: clamp(0.8rem, 1.8vw, 0.875rem);
  --text-base: clamp(0.9rem, 2vw, 1rem);
  --text-lg: clamp(1rem, 2.5vw, 1.125rem);
  --text-xl: clamp(1.15rem, 3vw, 1.25rem);
  --text-2xl: clamp(1.3rem, 3.5vw, 1.5rem);
  --text-3xl: clamp(1.6rem, 4.5vw, 1.875rem);
  --text-4xl: clamp(2rem, 6vw, 2.5rem);

  /* ── Transitions ── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* ── Z-index scale ── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 1500;

  /* ── Game-specific overrides (set per-page) ── */
  --game-accent: var(--color-accent-blue);
  --game-bg: var(--gradient-bg);
}

body {
  background: var(--game-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

/* ── Light theme ── */
.theme-light {
  --color-bg-primary: #f5f5f0;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: #e8e8e3;
  --color-surface: rgba(0, 0, 0, 0.04);
  --color-surface-hover: rgba(0, 0, 0, 0.08);
  --color-text-primary: #1a1a2e;
  --color-text-secondary: #4a4a5a;
  --color-text-muted: #6b7280;
  --glass-bg: rgba(0, 0, 0, 0.04);
  --glass-border: rgba(0, 0, 0, 0.1);
  --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --gradient-bg: linear-gradient(135deg, #f5f5f0 0%, #e8e8e3 50%, #f0f0eb 100%);
  --gradient-glass: linear-gradient(135deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.01) 100%);
}

/* ── Font size controls ── */
html.font-lg { font-size: 120%; }
html.font-xl { font-size: 140%; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* ── High contrast ── */
@media (prefers-contrast: high) {
  :root {
    --glass-bg: rgba(0, 0, 0, 0.8);
    --glass-border: rgba(255, 255, 255, 0.5);
  }
}

.high-contrast {
  --glass-bg: rgba(0, 0, 0, 0.8);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: 0px;
}

.high-contrast * {
  border-width: 2px !important;
}

.high-contrast .card,
.high-contrast .game-panel,
.high-contrast .btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}