/* Design tokens. * * Every color the app paints comes from here. Themes re-skin the whole UI by * overriding these variables on ; team colors arrive as * .tc-* classes that set --tc (inline styles are impossible under our CSP). */ :root, [data-theme="midnight"] { --bg: #0e1420; --bg-raised: #141c2b; --card: #172032; --card-hover: #1d2740; --line: #2a3550; --line-soft: #1f2942; --text: #e6ecf5; --text-dim: #9fb0c9; --text-faint: #6f8199; --accent: #38bdf8; --accent-soft: #7dd3fc; --accent-bright: #a5e8ff; --on-accent: #06202e; --beast-gold: #ffd166; --good: #6ee7a5; --bad: #f78f7c; --warn: #f0c05a; --info: #7cc4ea; --good-bg: #12291f; --danger-bg: #2e1a19; --warn-bg: #2b2415; --info-bg: #14252f; --shadow: 0 4px 16px rgba(0, 0, 0, 0.45); } [data-theme="jungle"] { --bg: #0c1410; --bg-raised: #12201a; --card: #16281f; --card-hover: #1d3327; --line: #2a4436; --line-soft: #1f3329; --text: #e7f2ea; --text-dim: #9dbcaa; --text-faint: #6e8d7c; --accent: #7ddf64; --accent-soft: #a5e88f; --accent-bright: #c6f5b8; --on-accent: #0a1a0c; --beast-gold: #ffd166; --good: #7ddf64; --bad: #f78f7c; --warn: #f0c05a; --info: #7cc4ea; --good-bg: #142a18; --danger-bg: #2e1a19; --warn-bg: #2b2415; --info-bg: #14252f; } [data-theme="dusk"] { --bg: #120e1c; --bg-raised: #1b1528; --card: #211a30; --card-hover: #2a2240; --line: #3a2f52; --line-soft: #2b2340; --text: #ede7f6; --text-dim: #b3a6c9; --text-faint: #857a9b; --accent: #f472b6; --accent-soft: #ff9ecb; --accent-bright: #ffc2dd; --on-accent: #2a0a1b; --beast-gold: #ffd166; --good: #86efac; --bad: #fda4a4; --warn: #fcd34d; --info: #a5b4fc; --good-bg: #172a1f; --danger-bg: #331a22; --warn-bg: #2f2618; --info-bg: #1e1f38; } [data-theme="ember"] { --bg: #12100d; --bg-raised: #1b1814; --card: #211d17; --card-hover: #272219; --line: #383127; --line-soft: #2a251d; --text: #ece3d0; --text-dim: #a89d88; --text-faint: #7d7462; --accent: #ff7a1a; --accent-soft: #ff9a4d; --accent-bright: #ffb347; --on-accent: #1a0e02; --beast-gold: #ffd166; --good: #86c98b; --bad: #e0695a; --warn: #e8b64c; --info: #6ab6d8; --good-bg: #1e2e1f; --danger-bg: #3a1f1a; --warn-bg: #332a16; --info-bg: #17262e; } [data-theme="slate"] { --bg: #101214; --bg-raised: #191c1f; --card: #1e2226; --card-hover: #262b30; --line: #333a41; --line-soft: #262c32; --text: #e8eaed; --text-dim: #a6adb5; --text-faint: #7a828b; --accent: #6ea8fe; --accent-soft: #9ec5ff; --accent-bright: #c3dbff; --on-accent: #08182e; --beast-gold: #ffd166; --good: #7ee2a8; --bad: #f79b8a; --warn: #efc157; --info: #86c8ea; --good-bg: #16261d; --danger-bg: #2a1a18; --warn-bg: #282215; --info-bg: #16242c; } /* Accent follows the viewer's own team color (set by a .tc-* class on body). */ [data-theme="team"] { --bg: #101214; --bg-raised: #191c1f; --card: #1e2226; --card-hover: #262b30; --line: #333a41; --line-soft: #262c32; --text: #e8eaed; --text-dim: #a6adb5; --text-faint: #7a828b; --accent: var(--tc, #6ea8fe); --accent-soft: var(--tc, #9ec5ff); --accent-bright: var(--tc, #c3dbff); --on-accent: #0b0f12; --beast-gold: #ffd166; --good: #7ee2a8; --bad: #f79b8a; --warn: #efc157; --info: #86c8ea; --good-bg: #16261d; --danger-bg: #2a1a18; --warn-bg: #282215; --info-bg: #16242c; } [data-theme="daylight"] { --bg: #f2f4f7; --bg-raised: #ffffff; --card: #ffffff; --card-hover: #eef1f5; --line: #cfd6e0; --line-soft: #e2e7ee; --text: #1a1f27; --text-dim: #55606e; --text-faint: #7c8798; --accent: #0f766e; --accent-soft: #0d9488; --accent-bright: #115e59; --on-accent: #ffffff; --beast-gold: #a16207; --good: #15803d; --bad: #b91c1c; --warn: #a16207; --info: #0369a1; --good-bg: #e7f6ec; --danger-bg: #fdeceb; --warn-bg: #fbf3e2; --info-bg: #e8f2fa; --shadow: 0 2px 10px rgba(16, 24, 40, 0.08); } :root { /* Type */ --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: var(--font-body); /* Shape & rhythm */ --radius: 12px; --radius-sm: 8px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --shadow: 0 4px 16px rgba(0, 0, 0, 0.45); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); --nav-height: 56px; } /* TV / very large screens scale everything up */ @media (min-width: 1800px) { :root { font-size: 20px; } } /* --- Team colors ----------------------------------------------------------- * One class per palette entry; components read var(--tc). Keeps every color * out of inline styles so the strict CSP holds. */ .tc-gold { --tc: #ffd166; } .tc-violet { --tc: #9d4edd; } .tc-seafoam { --tc: #80ed99; } .tc-lava { --tc: #d62828; } .tc-sky { --tc: #90e0ef; } .tc-sunset { --tc: #ff5d8f; } .tc-tide { --tc: #4ea8de; } .tc-ember { --tc: #ff7a1a; } .tc-teal { --tc: #0fa3b1; } .tc-idol { --tc: #f4a261; } .tc-steel { --tc: #6c9bcf; } .tc-coral { --tc: #ef6461; } .tc-lagoon { --tc: #2ec4b6; } .tc-orchid { --tc: #c77dff; } .tc-palm { --tc: #40916c; } .tc-sand { --tc: #d9b08c; } .tc-unknown { --tc: var(--text-faint); } /* Avatar preset backgrounds (same no-inline-style rule). */ .av-torch-1 { --av: #7a3b0e; } .av-palm-1 { --av: #1e4d3a; } .av-wave-1 { --av: #14424f; } .av-idol-1 { --av: #4a4033; } .av-coconut-1 { --av: #5b4230; } .av-fire-2 { --av: #3d3323; } .av-shell-1 { --av: #54444f; } .av-sun-1 { --av: #6b3b1f; } .av-map-1 { --av: #3b4a5a; } .av-crab-1 { --av: #642e28; } .av-fish-1 { --av: #1f4d5e; } .av-snake-1 { --av: #33502a; }