/* ==========================================================================
   THEMES — every color in the app comes from these tokens.
   Add a theme by adding a [data-app-theme="…"] block + an entry in js/store.js THEMES.
   ========================================================================== */

:root,
[data-app-theme="pink"] {
  /* Black & Pink (default) */
  --bg: #0a080d;
  --bg-elev: #110d16;
  --surface: #17121d;
  --surface-2: #211a29;
  --surface-3: #2c2236;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #fbf7fd;
  --text-2: #c9bfd2;
  --muted: #8c8098;
  --accent: #ff3d8b;
  --accent-hover: #ff5c9e;
  --accent-ink: #ffffff;
  --accent-soft: rgba(255, 61, 139, 0.16);
  --accent-2: #ffb3d1;          /* secondary highlight (headings, pills) */
  --accent-2-ink: #2a0716;
  --chip-active-bg: #ffb3d1;
  --chip-active-ink: #2a0716;
  --display-color: #ffffff;
  --display-alt: #ff7fb2;       /* section headers like "JUST LANDED" */
  --nav-bg: rgba(10, 8, 13, 0.86);
  --ok: #33d69f;
  --ok-soft: rgba(51, 214, 159, 0.14);
  --warn: #ffb547;
  --warn-soft: rgba(255, 181, 71, 0.14);
  --bad: #ff5a5f;
  --bad-soft: rgba(255, 90, 95, 0.14);
  --info: #6fb7ff;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --glow: 0 6px 24px rgba(255, 61, 139, 0.35);
  --scheme: dark;
}

[data-app-theme="red-black"] {
  /* Red, White & Black */
  --bg: #080808;
  --bg-elev: #0f0f0f;
  --surface: #151515;
  --surface-2: #1e1e1e;
  --surface-3: #292929;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #ffffff;
  --text-2: #d0d0d0;
  --muted: #8d8d8d;
  --accent: #e3262f;
  --accent-hover: #f43d45;
  --accent-ink: #ffffff;
  --accent-soft: rgba(227, 38, 47, 0.16);
  --accent-2: #ffffff;
  --accent-2-ink: #0a0a0a;
  --chip-active-bg: #ffffff;
  --chip-active-ink: #0a0a0a;
  --display-color: #ffffff;
  --display-alt: #ff4a52;
  --nav-bg: rgba(8, 8, 8, 0.88);
  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, 0.14);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --bad: #ff4a52;
  --bad-soft: rgba(255, 74, 82, 0.15);
  --info: #7cb8ff;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  --glow: 0 6px 24px rgba(227, 38, 47, 0.38);
  --scheme: dark;
}

[data-app-theme="red-gold"] {
  /* Red, White & Gold (light) */
  --bg: #fbf8f2;
  --bg-elev: #f5efe4;
  --surface: #ffffff;
  --surface-2: #f6f0e5;
  --surface-3: #ece2d0;
  --line: rgba(60, 40, 10, 0.10);
  --line-strong: rgba(60, 40, 10, 0.20);
  --text: #1a140c;
  --text-2: #4a4033;
  --muted: #847763;
  --accent: #c8102e;
  --accent-hover: #ad0d27;
  --accent-ink: #ffffff;
  --accent-soft: rgba(200, 16, 46, 0.10);
  --accent-2: #c9a227;
  --accent-2-ink: #2a1f04;
  --chip-active-bg: #c8102e;
  --chip-active-ink: #ffffff;
  --display-color: #1a140c;
  --display-alt: #b38a12;
  --nav-bg: rgba(255, 255, 255, 0.9);
  --ok: #0f9d6b;
  --ok-soft: rgba(15, 157, 107, 0.12);
  --warn: #b7791f;
  --warn-soft: rgba(183, 121, 31, 0.13);
  --bad: #c8102e;
  --bad-soft: rgba(200, 16, 46, 0.10);
  --info: #1d6fd1;
  --shadow: 0 10px 28px rgba(80, 55, 10, 0.12);
  --glow: 0 6px 22px rgba(200, 16, 46, 0.28);
  --scheme: light;
}