/* ==================== DESIGN TOKENS & CSS VARIABLES ==================== */

/* Default: WRATH MODE variables */
:root {
  --mode: "wrath";
  --primary: #ff4444;
  --primary-dark: #cc0000;
  --primary-light: #ff6666;
  --accent: #ff8800;
  --accent-dark: #cc6600;
  --secondary: #1a0a0a;
  --secondary-dark: #0d0505;
  --danger: #ff0000;
  --success: #2ecc71;
  --text-light: #fff5f5;
  --text-medium: #ffcccc;
  --glow-1: rgba(255, 68, 68, 0.7);
  --glow-2: rgba(255, 136, 0, 0.9);
  --bg-overlay-wrath: linear-gradient(
    135deg,
    rgba(139, 0, 0, 0.3) 0%,
    rgba(10, 0, 0, 0.6) 50%,
    rgba(50, 0, 0, 0.4) 100%
  );
  --container-bg-wrath: linear-gradient(
    145deg,
    rgba(20, 5, 5, 0.65),
    rgba(8, 2, 2, 0.75)
  );
  --radius-md: 12px;
  --radius-lg: 16px;
  --transition: cubic-bezier(0.4, 0, 0.2, 1);
}

/* SHIELD MODE overrides */
body.shield-mode {
  --mode: "shield";
  --primary: #00b8b8;
  --primary-dark: #008080;
  --primary-light: #33cccc;
  --accent: #00ffaa;
  --accent-dark: #00cc88;
  --secondary: #001f1f;
  --secondary-dark: #000d0d;
  --danger: #009999;
  --success: #33ffcc;
  --text-light: #e5ffff;
  --text-medium: #b3ffff;
  --glow-1: rgba(0, 200, 200, 0.6);
  --glow-2: rgba(0, 255, 170, 0.8);
  --bg-overlay-wrath: linear-gradient(
    135deg,
    rgba(0, 48, 48, 0.25) 0%,
    rgba(0, 8, 8, 0.6) 50%,
    rgba(0, 28, 28, 0.35) 100%
  );
  --container-bg-wrath: linear-gradient(
    145deg,
    rgba(3, 10, 12, 0.65),
    rgba(4, 8, 10, 0.75)
  );
}

/* SPEAR HERO MODE overrides */
body.spear-mode {
  --mode: "spear";
  --primary: #ffd700;
  --primary-dark: #ccac00;
  --primary-light: #ffea70;
  --accent: #ff8c00;
  --accent-dark: #cc7000;
  --secondary: #1f1a00;
  --secondary-dark: #0d0b00;
  --danger: #ff4500;
  --success: #ffff00;
  --text-light: #fffdf0;
  --text-medium: #ffeaa0;
  --glow-1: rgba(255, 215, 0, 0.7);
  --glow-2: rgba(255, 140, 0, 0.9);
  --bg-overlay-wrath: linear-gradient(
    135deg,
    rgba(48, 40, 0, 0.3) 0%,
    rgba(10, 8, 0, 0.6) 50%,
    rgba(30, 25, 0, 0.4) 100%
  );
}

/* BOW HERO MODE overrides */
body.bow-mode {
  --mode: "bow";
  --primary: #00ff7f;
  --primary-dark: #00cc66;
  --primary-light: #70ffb5;
  --accent: #00fa9a;
  --accent-dark: #00c77b;
  --secondary: #001f0d;
  --secondary-dark: #000d05;
  --danger: #008000;
  --success: #7effc5;
  --text-light: #f0fff7;
  --text-medium: #a0ffd0;
  --glow-1: rgba(0, 255, 127, 0.7);
  --glow-2: rgba(0, 250, 154, 0.9);
  --bg-overlay-wrath: linear-gradient(
    135deg,
    rgba(0, 48, 20, 0.3) 0%,
    rgba(0, 10, 4, 0.6) 50%,
    rgba(0, 30, 15, 0.4) 100%
  );
}