/* ===== Overlay color themes =====
 * Each theme sets CSS variables consumed by the panels (header/team bars) and
 * text. Themes do NOT touch the window interiors (stay transparent) or the
 * user's background image. Applied via #stage[data-theme="…"].
 *
 * Variables:
 *   --panel-bg      header/team-bar background
 *   --panel-border  panel border color
 *   --panel-text    primary text
 *   --panel-muted   secondary text
 *   --accent        highlight (cap value, run number)
 *   --accent-2      secondary highlight
 */

#stage {
  /* default (classic dark) */
  --panel-bg: linear-gradient(180deg, rgba(22, 26, 40, 0.92), rgba(14, 16, 26, 0.92));
  --panel-border: rgba(255, 255, 255, 0.18);
  --panel-text: #f2f4ff;
  --panel-muted: #aab0c8;
  --accent: #6ea8ff;
  --accent-2: #ffd166;
}

#stage[data-theme="kanto"] {
  --panel-bg: linear-gradient(180deg, rgba(150, 30, 30, 0.94), rgba(96, 16, 16, 0.94));
  --panel-border: #f0c24a;
  --panel-text: #fff4e0;
  --panel-muted: #f2c9a8;
  --accent: #ffd23f;
  --accent-2: #ff6b5e;
}

#stage[data-theme="johto"] {
  --panel-bg: linear-gradient(180deg, rgba(70, 54, 30, 0.94), rgba(40, 30, 16, 0.95));
  --panel-border: #d9a441;
  --panel-text: #fdf3d6;
  --panel-muted: #d8c197;
  --accent: #f2c14e;
  --accent-2: #9ad0ff;
}

#stage[data-theme="hoenn"] {
  --panel-bg: linear-gradient(180deg, rgba(20, 96, 72, 0.94), rgba(10, 54, 44, 0.95));
  --panel-border: #57d6a8;
  --panel-text: #eafff6;
  --panel-muted: #a9ddc9;
  --accent: #61e8b0;
  --accent-2: #ffd166;
}

#stage[data-theme="sinnoh"] {
  --panel-bg: linear-gradient(180deg, rgba(34, 50, 82, 0.94), rgba(18, 28, 50, 0.95));
  --panel-border: #8fb8e8;
  --panel-text: #eef5ff;
  --panel-muted: #adc0dd;
  --accent: #9cc9ff;
  --accent-2: #e0e6f0;
}

#stage[data-theme="unova"] {
  --panel-bg: linear-gradient(180deg, rgba(24, 24, 28, 0.96), rgba(10, 10, 12, 0.97));
  --panel-border: #38c6d6;
  --panel-text: #ffffff;
  --panel-muted: #b8bcc4;
  --accent: #3cd0e0;
  --accent-2: #ff5555;
}

#stage[data-theme="kalos"] {
  --panel-bg: linear-gradient(180deg, rgba(36, 52, 96, 0.94), rgba(22, 32, 62, 0.95));
  --panel-border: #e6b3d4;
  --panel-text: #f4f7ff;
  --panel-muted: #c3cbe6;
  --accent: #7fb0ff;
  --accent-2: #ff8fc7;
}

#stage[data-theme="alola"] {
  --panel-bg: linear-gradient(180deg, rgba(18, 120, 120, 0.93), rgba(12, 74, 82, 0.95));
  --panel-border: #ffcf5c;
  --panel-text: #eafffb;
  --panel-muted: #a9e0da;
  --accent: #ffc93c;
  --accent-2: #ff7e5f;
}

#stage[data-theme="galar"] {
  --panel-bg: linear-gradient(180deg, rgba(58, 34, 84, 0.94), rgba(32, 18, 48, 0.95));
  --panel-border: #d94a5a;
  --panel-text: #f7eefc;
  --panel-muted: #c9b6d8;
  --accent: #ff5a6e;
  --accent-2: #8fd0ff;
}

#stage[data-theme="paldea"] {
  --panel-bg: linear-gradient(180deg, rgba(58, 40, 78, 0.94), rgba(30, 22, 44, 0.95));
  --panel-border: transparent;
  --panel-text: #fdf2ee;
  --panel-muted: #d6c3d0;
  --accent: #f5893a;
  --accent-2: #a95fd6;
}

/* ===== Light mode: white/light-based variant of each theme ===== */
#stage[data-mode="light"] {
  --panel-bg: linear-gradient(180deg, rgba(248, 249, 255, 0.95), rgba(226, 231, 244, 0.95));
  --panel-border: rgba(20, 24, 40, 0.28);
  --panel-text: #1a2036;
  --panel-muted: #55607a;
  --accent: #2b6cff;
  --accent-2: #d98a1b;
}

#stage[data-mode="light"][data-theme="kanto"] {
  --panel-bg: linear-gradient(180deg, rgba(255, 240, 238, 0.96), rgba(250, 216, 212, 0.96));
  --panel-border: #c33a2c;
  --panel-text: #4a1414;
  --panel-muted: #9a5a52;
  --accent: #d23b2e;
  --accent-2: #d98a1b;
}

#stage[data-mode="light"][data-theme="johto"] {
  --panel-bg: linear-gradient(180deg, rgba(255, 249, 230, 0.96), rgba(244, 231, 197, 0.96));
  --panel-border: #b8863a;
  --panel-text: #4a3a18;
  --panel-muted: #8a7444;
  --accent: #b07a0b;
  --accent-2: #2f6fd0;
}

#stage[data-mode="light"][data-theme="hoenn"] {
  --panel-bg: linear-gradient(180deg, rgba(230, 250, 242, 0.96), rgba(200, 238, 224, 0.96));
  --panel-border: #1f9d6b;
  --panel-text: #123e30;
  --panel-muted: #4a7d68;
  --accent: #0f9d58;
  --accent-2: #d98a1b;
}

#stage[data-mode="light"][data-theme="sinnoh"] {
  --panel-bg: linear-gradient(180deg, rgba(238, 244, 255, 0.96), rgba(214, 226, 246, 0.96));
  --panel-border: #3a5a8c;
  --panel-text: #1c2a48;
  --panel-muted: #55648a;
  --accent: #2f5fbf;
  --accent-2: #6a7ba0;
}

#stage[data-mode="light"][data-theme="unova"] {
  --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(230, 232, 238, 0.97));
  --panel-border: #1c1c22;
  --panel-text: #14141a;
  --panel-muted: #55606c;
  --accent: #0e93a4;
  --accent-2: #e23b3b;
}

#stage[data-mode="light"][data-theme="kalos"] {
  --panel-bg: linear-gradient(180deg, rgba(240, 244, 255, 0.96), rgba(226, 216, 240, 0.96));
  --panel-border: #3a5a9c;
  --panel-text: #202a4a;
  --panel-muted: #6a6488;
  --accent: #3a6cd0;
  --accent-2: #d0559c;
}

#stage[data-mode="light"][data-theme="alola"] {
  --panel-bg: linear-gradient(180deg, rgba(230, 252, 248, 0.96), rgba(200, 240, 232, 0.96));
  --panel-border: #0f9d90;
  --panel-text: #123c3a;
  --panel-muted: #4a7d78;
  --accent: #0f9080;
  --accent-2: #e07a3c;
}

#stage[data-mode="light"][data-theme="galar"] {
  --panel-bg: linear-gradient(180deg, rgba(245, 238, 250, 0.96), rgba(228, 214, 240, 0.96));
  --panel-border: #7a3a5a;
  --panel-text: #3a1c30;
  --panel-muted: #7a5a70;
  --accent: #c0304a;
  --accent-2: #3a7bd5;
}

#stage[data-mode="light"][data-theme="paldea"] {
  --panel-bg: linear-gradient(180deg, rgba(252, 244, 240, 0.96), rgba(244, 226, 232, 0.96));
  --panel-border: #d0662a;
  --panel-text: #3a2230;
  --panel-muted: #7a5a68;
  --accent: #e0651a;
  --accent-2: #9a4fc0;
}