/* ============================================================
   Vampires vs. Werewolves — CSS Custom Properties (Design Tokens)
   ============================================================ */

:root {
  /* Background */
  --color-bg:           #0a0a0f;
  --color-surface:      #12121a;
  --color-surface-2:    #1a1a26;
  --color-border:       #2a2a3a;

  /* Factions */
  --color-vampire:      #8b0000;
  --color-vampire-dark: #5a0000;
  --color-vampire-glow: rgba(139, 0, 0, 0.35);
  --color-werewolf:     #2d5a27;
  --color-werewolf-dark:#1a3a16;
  --color-werewolf-glow:rgba(45, 90, 39, 0.35);

  /* Accent (set by race via body class) */
  --color-accent:       #8b0000;
  --color-accent-glow:  rgba(139, 0, 0, 0.35);

  /* Economy */
  --color-gold:         #c8a84b;
  --color-gold-glow:    rgba(200, 168, 75, 0.3);

  /* Text — WCAG AA compliant on both --color-bg and --color-surface */
  --color-text:         #e0d5c1;   /* 13.6:1 on bg / 12.8:1 on surface — AAA */
  --color-text-muted:   #8a8a9a;   /* 5.8:1 on bg / 5.5:1 on surface — AA pass (was #7a7a8a, AA-large only on surface) */
  --color-text-faint:   #7a7a90;   /* 4.7:1 on bg / 4.5:1 on surface — AA pass (was #74748a, AA-large only on surface) */

  /* State */
  --color-success:      #4caf7d;
  --color-danger:       #cf4444;
  --color-warning:      #e0a030;
  --color-info:         #4a80c0;

  /* HP / XP bars */
  --color-hp:           #cf4444;
  --color-hp-low:       #ff2020;
  --color-xp:           #c8a84b;
  --color-ap:           #4a80c0;

  /* Item rarity */
  --color-common:       #9a9a9a;
  --color-uncommon:     #4caf7d;
  --color-rare:         #4a80c0;
  --color-epic:         #a855f7;
  --color-legendary:    #f97316;

  /* Event themes */
  --color-blood-moon:   #cc0000;
  --color-full-moon:    #4040a0;

  /* Typography */
  --font-gothic:        'Cinzel', 'Times New Roman', serif;
  --font-body:          'Crimson Pro', 'Georgia', serif;
  --font-mono:          'Courier New', monospace;

  /* Font sizes */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  48px;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* Radius */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card:    0 2px 12px rgba(0,0,0,0.5);
  --shadow-modal:   0 8px 32px rgba(0,0,0,0.8);
  --shadow-glow-accent: 0 0 16px var(--color-accent-glow);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* Layout */
  --sidebar-width:  240px;
  --header-height:  60px;
  --max-width:      1200px;

  /* ─────────────── v2 tokens (Redesign v2) ─────────────── */

  /* Tinted elevation (warm, not pure grey) */
  --elev-1: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(139,0,0,0.05);
  --elev-2: 0 4px 12px rgba(0,0,0,0.5), 0 2px 6px rgba(139,0,0,0.08);
  --elev-3: 0 12px 32px rgba(0,0,0,0.6), 0 6px 16px rgba(139,0,0,0.12);
  --elev-vampire-2: 0 8px 24px rgba(139,0,0,0.25);
  --elev-werewolf-2: 0 8px 24px rgba(45,90,39,0.25);

  /* Glow tokens (decorative accents) */
  --glow-vampire:  0 0 24px rgba(139,0,0,0.45);
  --glow-werewolf: 0 0 24px rgba(45,90,39,0.45);
  --glow-gold:     0 0 18px rgba(200,168,75,0.4);

  /* Signature gradients */
  --grad-hero:        radial-gradient(ellipse at 50% 0%, rgba(139,0,0,0.18) 0%, transparent 55%),
                      linear-gradient(180deg, #0a0a0f 0%, #07070c 100%);
  --grad-blood-moon:  linear-gradient(135deg, #2a0008 0%, #5a0010 50%, #1a0004 100%);
  --grad-eclipse:     linear-gradient(135deg, #0a0420 0%, #1a0a40 50%, #04020f 100%);
  --grad-vampire:     linear-gradient(135deg, #2a0008 0%, #5a0010 100%);
  --grad-werewolf:    linear-gradient(135deg, #0a1a08 0%, #1a3a16 100%);
  --grad-gold:        linear-gradient(135deg, #c8a84b 0%, #e8c878 50%, #c8a84b 100%);

  /* Glassmorphism */
  --glass-bg:      rgba(18, 18, 26, 0.72);
  --glass-bg-strong: rgba(18, 18, 26, 0.88);
  --glass-border:  rgba(255, 255, 255, 0.08);
  --backdrop-blur: blur(12px) saturate(1.4);

  /* Pill / chip radius */
  --radius-pill: 9999px;

  /* 4px-base spacing scale (semantic) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Easings */
  --ease-out-soft:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-soft:   cubic-bezier(0.64, 0, 0.78, 0);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Durations */
  --dur-fast:  150ms;
  --dur-base:  240ms;
  --dur-slow:  420ms;

  /* Fluid type scale (clamp from mobile→desktop) */
  --fluid-h1: clamp(2.25rem, 1.6rem + 3.4vw, 4.5rem);
  --fluid-h2: clamp(1.75rem, 1.3rem + 2.2vw, 3rem);
  --fluid-h3: clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
  --fluid-lead: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
}

/* Race overrides */
body.race-vampire {
  --color-accent:      #8b0000;
  --color-accent-glow: rgba(139, 0, 0, 0.35);
}
body.race-werewolf {
  --color-accent:      #2d5a27;
  --color-accent-glow: rgba(45, 90, 39, 0.35);
}

/* Event theme overrides */
[data-event="blood-moon"] {
  --color-bg:          #080008;
  --color-accent:      #cc0000;
  --color-accent-glow: rgba(204, 0, 0, 0.45);
  --color-surface:     #120006;
  --color-border:      #4a0010;
}
[data-event="full-moon"] {
  --color-accent:      #4040a0;
  --color-accent-glow: rgba(64, 64, 160, 0.4);
}
[data-event="halloween"] {
  --color-bg:          #050005;
  --color-accent:      #ff6600;
  --color-accent-glow: rgba(255, 102, 0, 0.45);
  --color-surface:     #100a00;
  --color-border:      #4a2000;
}
[data-event="winter-hunt"] {
  --color-bg:          #050510;
  --color-accent:      #88aaee;
  --color-accent-glow: rgba(136, 170, 238, 0.4);
  --color-surface:     #080818;
  --color-border:      #1a2040;
}

/* ── Color-blind mode ─────────────────────────────────────────
   Activated by body.colorblind (toggled via settings panel).
   Uses distinguishable hues for deuteranopia / protanopia:
     - HP bar  → blue  instead of red
     - XP bar  → amber instead of yellow-gold
     - AP bar  → purple instead of blue
     - Success → teal  instead of green
     - Danger  → orange instead of red
   Pattern texture on bars is added via a CSS linear-gradient overlay.
   ──────────────────────────────────────────────────────────── */
body.colorblind {
  --color-hp:      #1a7fcc;
  --color-hp-low:  #0044aa;
  --color-xp:      #e07020;
  --color-ap:      #8844cc;
  --color-success: #008888;
  --color-danger:  #e06020;
  --color-vampire: #1a6acc;
  --color-werewolf:#cc8800;
  --color-accent:  #1a6acc;
}
body.colorblind.race-vampire { --color-accent: #1a6acc; }
body.colorblind.race-werewolf { --color-accent: #cc8800; }

/* Striped pattern on HP bars to reinforce low-health state without color alone */
body.colorblind .hp-bar-fill[data-low="true"],
body.colorblind [class*="hp-bar"][class*="low"] {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(255,255,255,0.15) 4px,
    rgba(255,255,255,0.15) 8px
  );
}

/* ── Glassmorphism tooltip / popup style ──────────────────────
   Usage: add class="glass-tooltip" or "glass-panel" to any element.
   -webkit-backdrop-filter included for Safari compatibility.
   ──────────────────────────────────────────────────────────── */
.glass-tooltip,
.glass-panel {
  background: rgba(18, 18, 26, 0.72);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
          backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
  color: var(--color-text);
}

/* Smaller variant for inline tooltips */
.glass-tooltip {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  pointer-events: none;
  position: absolute;
  z-index: 9990;
  white-space: nowrap;
}

/* Larger variant for modal panels */
.glass-panel {
  padding: var(--space-md) var(--space-lg);
}

/* ── Halloween atmospheric particles overlay ──────────────────
   Spooky fog layer applied when data-event="halloween".
   ──────────────────────────────────────────────────────────── */
body[data-event="halloween"]::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 80, 0, 0.08) 0%, transparent 65%);
  animation: halloween-flicker 6s ease-in-out infinite;
}
@keyframes halloween-flicker {
  0%, 100% { opacity: 0.5; }
  40%       { opacity: 0.9; }
  70%       { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-event="halloween"]::before { animation: none; }
}

/* Blood Moon atmospheric fog overlay (applied when body has data-event) */
body[data-event="blood-moon"]::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(ellipse at 50% 0%, rgba(180, 0, 0, 0.12) 0%, transparent 70%);
  animation: blood-moon-pulse 4s ease-in-out infinite;
}
@keyframes blood-moon-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1.0; }
}
/* Reduce motion: disable pulse */
@media (prefers-reduced-motion: reduce) {
  body[data-event="blood-moon"]::before { animation: none; }
}