/* ── OCD design tokens — the single source of truth for every UI color ── Chrome tokens are RGB TRIPLETS (`30 41 59`) so Tailwind opacity modifiers work: rgb(var(--c-x) / ). Board-diagram colors are FIXED on :root and identical in every theme — a dartboard's double is red in every theme (operator constraint, spec 2026-08-02). Shared contract with modes.html/changelog.html and (follow-up) dart-room.com. data-theme is set on by a head script BEFORE stylesheets load; the SPA inlines this file at build, /modes + /changelog link /theme.css. */ :root { --ring-triple: #34d399; --ring-double: #ef4444; --ring-single: #9ca3af; --ring-bull: #fbbf24; --ring-miss: #4b5563; --board-bg: #0b0f14; --board-bed-green: #16a34a; --board-bed-red: #dc2626; --board-bed-light: #f8fafc; --board-wire: #374151; --board-wire-faint: #1f2937; --board-num: #9ca3af; --board-dart: #60a5fa; --board-dart-hot: #ef4444; --board-missed-stroke: #fecaca; --board-label: #e5e7eb; } /* Slate+amber — selectable in Settings. accent == warn here on purpose: that is today's reality (amber plays both roles); they diverge in other themes. */ [data-theme="dark"] { --c-app: 11 15 20; --c-surface-1: 15 23 42; --c-surface-2: 30 41 59; --c-surface-3: 51 65 85; --c-line: 71 85 105; --c-ink-bright: 243 244 246; --c-ink: 229 231 235; --c-ink-muted: 156 163 175; --c-ink-faint: 107 114 128; --c-accent: 180 83 9; --c-accent-active: 146 64 14; --c-accent-soft: 120 53 15; --c-accent-text: 252 211 77; --c-accent-contrast: 255 251 235; --c-ok: 4 120 87; --c-ok-active: 6 95 70; --c-ok-soft: 6 78 59; --c-ok-text: 110 231 183; --c-ok-contrast: 255 255 255; --c-info: 3 105 161; --c-info-active: 7 89 133; --c-info-soft: 12 74 110; --c-info-text: 125 211 252; --c-info-contrast: 255 255 255; --c-warn: 180 83 9; --c-warn-active: 146 64 14; --c-warn-soft: 120 53 15; --c-warn-text: 252 211 77; --c-warn-contrast: 255 251 235; --c-danger: 190 18 60; --c-danger-active: 159 18 57; --c-danger-soft: 136 19 55; --c-danger-text: 253 164 175; --c-danger-contrast: 255 255 255; --c-tournament: 109 40 217; --c-tournament-active: 91 33 182; --c-tournament-soft: 76 29 149; --c-tournament-text: 196 181 253; --c-tournament-contrast: 255 255 255; --c-feedback: 134 25 143; --c-feedback-active: 112 26 117; --c-feedback-soft: 74 4 78; --c-feedback-text: 240 171 252; --c-feedback-contrast: 255 255 255; --c-calib: 194 65 12; --c-calib-active: 154 52 27; --c-calib-soft: 124 45 18; --c-calib-text: 253 186 116; --c-calib-contrast: 255 255 255; --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --radius: 0.75rem; } /* dart-room.com family: navy + teal, values lifted from the hub's base.html (#1a1a2e / #16213e / #00d4aa / #e74c3c) so trainer and dart-room read as one. */ [data-theme="dart-room"] { --c-app: 26 26 46; --c-surface-1: 22 33 62; --c-surface-2: 31 42 78; --c-surface-3: 42 56 99; --c-line: 58 74 122; --c-ink-bright: 255 255 255; --c-ink: 238 238 238; --c-ink-muted: 154 164 178; --c-ink-faint: 109 118 138; --c-accent: 0 212 170; --c-accent-active: 0 184 148; --c-accent-soft: 6 61 51; --c-accent-text: 94 234 212; --c-accent-contrast: 0 26 20; --c-ok: 5 150 105; --c-ok-active: 4 120 87; --c-ok-soft: 6 78 59; --c-ok-text: 110 231 183; --c-ok-contrast: 255 255 255; --c-info: 2 132 199; --c-info-active: 3 105 161; --c-info-soft: 12 74 110; --c-info-text: 125 211 252; --c-info-contrast: 255 255 255; --c-warn: 217 119 6; --c-warn-active: 180 83 9; --c-warn-soft: 120 53 15; --c-warn-text: 252 211 77; --c-warn-contrast: 26 26 46; --c-danger: 231 76 60; --c-danger-active: 192 57 43; --c-danger-soft: 85 32 26; --c-danger-text: 245 167 157; --c-danger-contrast: 255 255 255; --c-tournament: 124 58 237; --c-tournament-active: 109 40 217; --c-tournament-soft: 76 29 149; --c-tournament-text: 196 181 253; --c-tournament-contrast: 255 255 255; --c-feedback: 162 28 175; --c-feedback-active: 134 25 143; --c-feedback-soft: 112 26 117; --c-feedback-text: 240 171 252; --c-feedback-contrast: 255 255 255; --c-calib: 234 88 12; --c-calib-active: 194 65 12; --c-calib-soft: 124 45 18; --c-calib-text: 253 186 116; --c-calib-contrast: 255 255 255; --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --radius: 0.75rem; } [data-theme="light"] { color-scheme: light; --c-app: 243 244 246; --c-surface-1: 232 235 240; --c-surface-2: 255 255 255; --c-surface-3: 226 230 237; --c-line: 176 184 197; --c-ink-bright: 15 23 42; --c-ink: 31 41 55; --c-ink-muted: 85 96 110; --c-ink-faint: 138 147 162; --c-accent: 15 157 132; --c-accent-active: 11 122 103; --c-accent-soft: 215 245 238; --c-accent-text: 11 110 93; --c-accent-contrast: 255 255 255; --c-ok: 4 120 87; --c-ok-active: 6 95 70; --c-ok-soft: 209 250 229; --c-ok-text: 6 95 70; --c-ok-contrast: 255 255 255; --c-info: 3 105 161; --c-info-active: 7 89 133; --c-info-soft: 224 242 254; --c-info-text: 7 89 133; --c-info-contrast: 255 255 255; --c-warn: 180 83 9; --c-warn-active: 146 64 14; --c-warn-soft: 254 243 199; --c-warn-text: 146 64 14; --c-warn-contrast: 255 255 255; --c-danger: 220 38 38; --c-danger-active: 185 28 28; --c-danger-soft: 254 226 226; --c-danger-text: 185 28 28; --c-danger-contrast: 255 255 255; --c-tournament: 109 40 217; --c-tournament-active: 91 33 182; --c-tournament-soft: 237 233 254; --c-tournament-text: 91 33 182; --c-tournament-contrast: 255 255 255; --c-feedback: 162 28 175; --c-feedback-active: 134 25 143; --c-feedback-soft: 250 232 255; --c-feedback-text: 134 25 143; --c-feedback-contrast: 255 255 255; --c-calib: 194 65 12; --c-calib-active: 154 52 27; --c-calib-soft: 255 237 213; --c-calib-text: 154 52 27; --c-calib-contrast: 255 255 255; --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --radius: 0.75rem; }