/* ============================================================
   Hell & Heaven GO — CSS Custom Properties
   Both dark (default) and light themes
   ============================================================ */

:root {
  --bg: #06060f;
  --bg-secondary: #0a0a18;
  --bg-card: #0d0d1c;
  --text: #e0e0f0;
  --text-muted: #5a5a7a;
  --border: rgba(255, 255, 255, 0.07);
  --shadow: rgba(0, 0, 0, 0.5);
  --angel: #00d4ff;
  --devil: #ff2244;
  --angel-glow: rgba(0, 212, 255, 0.25);
  --devil-glow: rgba(255, 34, 68, 0.25);
  --btn-primary-bg: #00d4ff;
  --btn-primary-text: #06060f;
  --overlay-bg: rgba(0, 0, 0, 0.75);
  --input-bg: #111124;
  --input-border: rgba(255, 255, 255, 0.12);
  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --progress-bg: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] {
  --bg: #f2f2fc;
  --bg-secondary: #e8e8f8;
  --bg-card: #ffffff;
  --text: #1a1a2e;
  --text-muted: #7777aa;
  --border: rgba(0, 0, 0, 0.08);
  --shadow: rgba(0, 0, 0, 0.1);
  --angel: #0088bb;
  --devil: #cc1133;
  --angel-glow: rgba(0, 136, 187, 0.15);
  --devil-glow: rgba(204, 17, 51, 0.15);
  --btn-primary-bg: #0088bb;
  --btn-primary-text: #ffffff;
  --overlay-bg: rgba(0, 0, 0, 0.45);
  --input-bg: #f8f8ff;
  --input-border: rgba(0, 0, 0, 0.15);
  --scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --progress-bg: rgba(0, 0, 0, 0.08);
}

/* Smooth theme switching — applied globally here to avoid conflicts */
*, *::before, *::after {
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}