/* ===================================================== themes.css — Per-game color palettes Applied via [data-game] attribute on Dark mode (default) + light mode via [data-theme="light"] ===================================================== */ /* ── Default / Home screen ────────────────────────────── */ :root { --color-primary: #ffffff; --color-primary-rgb: 255, 255, 255; --color-accent: #90caf9; --color-accent-rgb: 144, 202, 249; --color-bg: #121212; --color-surface: #1e1e1e; --color-surface-2: #2a2a2a; --color-text: #f0f0f0; --color-text-muted: #888888; --color-border: rgba(255, 255, 255, 0.1); --color-danger: #f44336; --color-success: #4caf50; --color-warning: #ff9800; /* Smooth palette transitions */ transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ── X-Wing 2nd Edition ───────────────────────────────── */ /* Rebel red / orange / deep space navy */ [data-game="xwing-2e"] { --color-primary: #c62828; --color-primary-rgb: 198, 40, 40; --color-accent: #ff8f00; --color-accent-rgb: 255, 143, 0; --color-bg: #1a1a2e; --color-surface: #16213e; --color-surface-2: #1e2a4a; --color-text: #f0f0f0; --color-text-muted: #8a9cc0; --color-border: rgba(198, 40, 40, 0.2); } /* X-Wing 2e — Light mode */ [data-game="xwing-2e"][data-theme="light"] { --color-bg: #fdf3f3; --color-surface: #ffffff; --color-surface-2: #f5e6e6; --color-text: #1a0a0a; --color-text-muted: #8a5555; --color-border: rgba(198, 40, 40, 0.15); } /* ── X-Wing 1st Edition ───────────────────────────────── */ /* Imperial blue / light blue / darker space */ [data-game="xwing-1e"] { --color-primary: #1565c0; --color-primary-rgb: 21, 101, 192; --color-accent: #90caf9; --color-accent-rgb: 144, 202, 249; --color-bg: #0d0d1a; --color-surface: #0f1929; --color-surface-2: #162035; --color-text: #e8f4fd; --color-text-muted: #7a9ab5; --color-border: rgba(21, 101, 192, 0.25); } /* X-Wing 1e — Light mode */ [data-game="xwing-1e"][data-theme="light"] { --color-bg: #f0f6ff; --color-surface: #ffffff; --color-surface-2: #e3eeff; --color-text: #0a1525; --color-text-muted: #445d80; --color-border: rgba(21, 101, 192, 0.15); } /* ── Star Wars Armada 2nd Edition ─────────────────────── */ /* Fleet green / mint / deep navy */ /* Phase 2 — stub only */ [data-game="armada-2e"] { --color-primary: #1b5e20; --color-primary-rgb: 27, 94, 32; --color-accent: #69f0ae; --color-accent-rgb: 105, 240, 174; --color-bg: #0a1628; --color-surface: #0e1f36; --color-surface-2: #152840; --color-text: #e8f5e9; --color-text-muted: #6a9e7a; --color-border: rgba(27, 94, 32, 0.25); } [data-game="armada-2e"][data-theme="light"] { --color-bg: #f0fff4; --color-surface: #ffffff; --color-surface-2: #e0f7ea; --color-text: #0a1f0d; --color-text-muted: #3a6b45; --color-border: rgba(27, 94, 32, 0.15); } /* ── Star Wars Armada 1st Edition ─────────────────────── */ /* Deep purple / lavender / dark void */ /* Phase 2 — stub only */ [data-game="armada-1e"] { --color-primary: #4a148c; --color-primary-rgb: 74, 20, 140; --color-accent: #ce93d8; --color-accent-rgb: 206, 147, 216; --color-bg: #120d1e; --color-surface: #1a1228; --color-surface-2: #221834; --color-text: #f3e5f5; --color-text-muted: #9575a8; --color-border: rgba(74, 20, 140, 0.25); } [data-game="armada-1e"][data-theme="light"] { --color-bg: #f9f0ff; --color-surface: #ffffff; --color-surface-2: #f0e0ff; --color-text: #1a0a2e; --color-text-muted: #6b3d80; --color-border: rgba(74, 20, 140, 0.15); } /* ── BattleTech ───────────────────────────────────────── */ /* Mech orange / yellow / gunmetal */ /* Phase 3 — stub only */ [data-game="battletech"] { --color-primary: #bf360c; --color-primary-rgb: 191, 54, 12; --color-accent: #ffcc02; --color-accent-rgb: 255, 204, 2; --color-bg: #1c1c1c; --color-surface: #252525; --color-surface-2: #2e2e2e; --color-text: #f5f0e8; --color-text-muted: #8a7a6a; --color-border: rgba(191, 54, 12, 0.25); } [data-game="battletech"][data-theme="light"] { --color-bg: #fff8f0; --color-surface: #ffffff; --color-surface-2: #fff0e0; --color-text: #1c0e00; --color-text-muted: #7a4a20; --color-border: rgba(191, 54, 12, 0.15); } /* ── Krosmaster Arena ─────────────────────────────────── */ /* Ankama purple / pink / dark fantasy */ /* Phase 3 — stub only */ [data-game="krosmaster"] { --color-primary: #6a1b9a; --color-primary-rgb: 106, 27, 154; --color-accent: #f48fb1; --color-accent-rgb: 244, 143, 177; --color-bg: #1a0a2e; --color-surface: #22103a; --color-surface-2: #2c1648; --color-text: #fce4ec; --color-text-muted: #9a6aaa; --color-border: rgba(106, 27, 154, 0.25); } [data-game="krosmaster"][data-theme="light"] { --color-bg: #fdf0ff; --color-surface: #ffffff; --color-surface-2: #f8e0ff; --color-text: #1a0a2e; --color-text-muted: #7a3a90; --color-border: rgba(106, 27, 154, 0.15); } /* ── Light mode defaults (no game) ───────────────────── */ [data-theme="light"] { --color-bg: #f5f5f5; --color-surface: #ffffff; --color-surface-2: #eeeeee; --color-text: #121212; --color-text-muted: #666666; --color-border: rgba(0, 0, 0, 0.1); } /* ── Game accent stripe on nav ────────────────────────── */ /* A thin colored top border on the nav signals the active game */ [data-game="xwing-2e"] .nav { border-top: 3px solid var(--color-primary); } [data-game="xwing-1e"] .nav { border-top: 3px solid var(--color-primary); } [data-game="armada-2e"] .nav { border-top: 3px solid var(--color-primary); } [data-game="armada-1e"] .nav { border-top: 3px solid var(--color-primary); } [data-game="battletech"].nav { border-top: 3px solid var(--color-primary); } [data-game="krosmaster"] .nav { border-top: 3px solid var(--color-primary); } /* ── Themed selection highlight ───────────────────────── */ ::selection { background-color: rgba(var(--color-accent-rgb), 0.3); color: var(--color-text); }