/*
 * themes.css
 * 4 game-dashboard inspired themes, each with light + dark mode.
 * Inspired by: ESCharts esports analytics, Dribbble game HUD UIs.
 * Toggle flips data-mode light/dark; dropdown sets data-theme.
 */

:root {
  --accent-text: #ffffff;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
}

/* ══════════════════════════════════════════════════════
   CYBER  —  Electric cyan / ESCharts-style esports HUD
   Dark : near-black navy + electric cyan neon
   Light: icy white + deep sky blue
══════════════════════════════════════════════════════ */
[data-theme="cyber"] {
  color-scheme: light;
  --bg: #eaf6ff;
  --surface: #ffffff;
  --surface-alt: #d6eeff;
  --stripe: #f0f8ff;
  --text: #071524;
  --muted: #3d6e8f;
  --border: #90cdf4;
  --accent: #0078d4;
  --accent-text: #ffffff;
  --accent-soft: #cce8ff;
  --danger: #e53e3e;
  --pos: #38a169;
  --neg: #e53e3e;
  --shadow: 0 4px 20px rgba(0,120,212,0.10), 0 1px 4px rgba(7,21,36,0.06);
  --header-color: #0078d4;
  --highlight-bg: #bee3f8;
  --seed-a-bg: #fef3c7; --seed-a-text: #92400e;
  --seed-b-bg: #bee3f8; --seed-b-text: #2b6cb0;
  --seed-c-bg: #e9d8fd; --seed-c-text: #553c9a;
  --seed-d-bg: #c6f6d5; --seed-d-text: #276749;
  --seed-other-bg: #d6eeff; --seed-other-text: #3d6e8f;
}
[data-theme="cyber"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #06080f;
  --surface: #0c1220;
  --surface-alt: #111d33;
  --stripe: #0e1828;
  --text: #c8e8ff;
  --muted: #4a7fa8;
  --border: #1a3a5c;
  --accent: #00d4ff;
  --accent-text: #06080f;
  --accent-soft: #003d55;
  --danger: #fc8181;
  --pos: #68d391;
  --neg: #fc8181;
  --shadow: 0 0 24px rgba(0,212,255,0.15), 0 1px 4px rgba(0,0,0,0.6);
  --header-color: #00d4ff;
  --highlight-bg: #0a2a44;
  --seed-a-bg: #744210; --seed-a-text: #faf089;
  --seed-b-bg: #1a365d; --seed-b-text: #63b3ed;
  --seed-c-bg: #322659; --seed-c-text: #b794f4;
  --seed-d-bg: #1c4532; --seed-d-text: #68d391;
  --seed-other-bg: #111d33; --seed-other-text: #4a7fa8;
}

/* ══════════════════════════════════════════════════════
   TACTICAL  —  Military game HUD, amber-on-dark
   Dark : dark olive + amber/gold command display
   Light: warm parchment + deep olive
══════════════════════════════════════════════════════ */
[data-theme="tactical"] {
  color-scheme: light;
  --bg: #f9f6ef;
  --surface: #ffffff;
  --surface-alt: #f0ead8;
  --stripe: #faf8f3;
  --text: #1c1a10;
  --muted: #6b6230;
  --border: #c9b96a;
  --accent: #856c00;
  --accent-text: #ffffff;
  --accent-soft: #fef3c7;
  --danger: #b91c1c;
  --pos: #15803d;
  --neg: #b91c1c;
  --shadow: 0 4px 20px rgba(133,108,0,0.10), 0 1px 4px rgba(28,26,16,0.06);
  --header-color: #856c00;
  --highlight-bg: #fef08a;
  --seed-a-bg: #fef3c7; --seed-a-text: #78350f;
  --seed-b-bg: #d1fae5; --seed-b-text: #065f46;
  --seed-c-bg: #ede9fe; --seed-c-text: #5b21b6;
  --seed-d-bg: #dbeafe; --seed-d-text: #1e40af;
  --seed-other-bg: #f0ead8; --seed-other-text: #6b6230;
}
[data-theme="tactical"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #090b07;
  --surface: #111509;
  --surface-alt: #1a200f;
  --stripe: #161c0d;
  --text: #ffe880;
  --muted: #8a8040;
  --border: #2e3518;
  --accent: #f59e0b;
  --accent-text: #090b07;
  --accent-soft: #2e2200;
  --danger: #fca5a5;
  --pos: #86efac;
  --neg: #fca5a5;
  --shadow: 0 0 24px rgba(245,158,11,0.12), 0 1px 4px rgba(0,0,0,0.7);
  --header-color: #f59e0b;
  --highlight-bg: #2a1e00;
  --seed-a-bg: #451a03; --seed-a-text: #fde68a;
  --seed-b-bg: #064e3b; --seed-b-text: #6ee7b7;
  --seed-c-bg: #2d1b69; --seed-c-text: #c4b5fd;
  --seed-d-bg: #1e3a5f; --seed-d-text: #93c5fd;
  --seed-other-bg: #1a200f; --seed-other-text: #8a8040;
}

/* ══════════════════════════════════════════════════════
   PHANTOM  —  Purple neon, sci-fi ability screen
   Dark : deep void purple + bright violet neon
   Light: lavender mist + rich purple
══════════════════════════════════════════════════════ */
[data-theme="phantom"] {
  color-scheme: light;
  --bg: #faf5ff;
  --surface: #ffffff;
  --surface-alt: #f3e8ff;
  --stripe: #fdf8ff;
  --text: #1a0533;
  --muted: #7e57a0;
  --border: #d8b4fe;
  --accent: #7c3aed;
  --accent-text: #ffffff;
  --accent-soft: #ede9fe;
  --danger: #dc2626;
  --pos: #16a34a;
  --neg: #dc2626;
  --shadow: 0 4px 20px rgba(124,58,237,0.10), 0 1px 4px rgba(26,5,51,0.06);
  --header-color: #7c3aed;
  --highlight-bg: #e9d5ff;
  --seed-a-bg: #fef3c7; --seed-a-text: #92400e;
  --seed-b-bg: #ede9fe; --seed-b-text: #4c1d95;
  --seed-c-bg: #fce7f3; --seed-c-text: #9d174d;
  --seed-d-bg: #d1fae5; --seed-d-text: #065f46;
  --seed-other-bg: #f3e8ff; --seed-other-text: #7e57a0;
}
[data-theme="phantom"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #07020e;
  --surface: #100520;
  --surface-alt: #190830;
  --stripe: #130620;
  --text: #f0e6ff;
  --muted: #7c5fa0;
  --border: #2d1260;
  --accent: #c084fc;
  --accent-text: #07020e;
  --accent-soft: #2d0e60;
  --danger: #fca5a5;
  --pos: #86efac;
  --neg: #fca5a5;
  --shadow: 0 0 28px rgba(192,132,252,0.18), 0 1px 4px rgba(0,0,0,0.6);
  --header-color: #c084fc;
  --highlight-bg: #2d0e60;
  --seed-a-bg: #4c1d95; --seed-a-text: #ddd6fe;
  --seed-b-bg: #1e3a5f; --seed-b-text: #93c5fd;
  --seed-c-bg: #831843; --seed-c-text: #fbcfe8;
  --seed-d-bg: #064e3b; --seed-d-text: #6ee7b7;
  --seed-other-bg: #190830; --seed-other-text: #7c5fa0;
}

/* ══════════════════════════════════════════════════════
   CHAMPION  —  Google Material Design
   Light: Google's clean #f8f9fa + Google Blue #1a73e8
   Dark : Google dark #202124 + soft blue #8ab4f8
   Seed badges use Google's 4 brand colors (B/R/Y/G)
══════════════════════════════════════════════════════ */
[data-theme="champion"] {
  color-scheme: light;
  --bg: #f8f9fa;
  --surface: #ffffff;
  --surface-alt: #f1f3f4;
  --stripe: #f8f9fa;
  --text: #202124;
  --muted: #5f6368;
  --border: #dadce0;
  --accent: #1a73e8;
  --accent-text: #ffffff;
  --accent-soft: #e8f0fe;
  --danger: #ea4335;
  --pos: #34a853;
  --neg: #ea4335;
  --shadow: 0 1px 2px rgba(60,64,67,0.30), 0 2px 6px rgba(60,64,67,0.15);
  --header-color: #1a73e8;
  --highlight-bg: #e8f0fe;
  --seed-a-bg: #fce8e6; --seed-a-text: #c5221f;
  --seed-b-bg: #e8f0fe; --seed-b-text: #1558d6;
  --seed-c-bg: #fef7e0; --seed-c-text: #e37400;
  --seed-d-bg: #e6f4ea; --seed-d-text: #137333;
  --seed-other-bg: #f1f3f4; --seed-other-text: #5f6368;
}
[data-theme="champion"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #202124;
  --surface: #292a2d;
  --surface-alt: #35363a;
  --stripe: #2d2e31;
  --text: #e8eaed;
  --muted: #9aa0a6;
  --border: #3c4043;
  --accent: #8ab4f8;
  --accent-text: #202124;
  --accent-soft: #1a2c47;
  --danger: #f28b82;
  --pos: #81c995;
  --neg: #f28b82;
  --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.4);
  --header-color: #8ab4f8;
  --highlight-bg: #1a2c47;
  --seed-a-bg: #5c1f1a; --seed-a-text: #f28b82;
  --seed-b-bg: #1a2c47; --seed-b-text: #8ab4f8;
  --seed-c-bg: #4a3000; --seed-c-text: #fdd663;
  --seed-d-bg: #1a3a24; --seed-d-text: #81c995;
  --seed-other-bg: #35363a; --seed-other-text: #9aa0a6;
}