:root,
html[data-theme="light"] {
--theme-color-scheme: light;
/* Neutral scale */
--color-gray-50: 251 241 226;
--color-gray-100: 244 228 204;
--color-gray-200: 232 208 173;
--color-gray-300: 216 182 139;
--color-gray-400: 187 138 95;
--color-gray-500: 153 105 72;
--color-gray-600: 122 81 54;
--color-gray-700: 90 59 40;
--color-gray-800: 63 42 30;
--color-gray-900: 43 29 20;
--color-gray-950: 26 18 12;
/* Brand accents */
--color-ocean-blue: 42 86 116;
--color-ocean-teal: 79 143 159;
--color-seafoam: 167 216 203;
--color-seafoam-deep: 143 201 185;
--color-seafoam-light: 203 233 224;
--color-sand: 199 145 86;
--color-driftwood: 143 99 61;
/* Semantic tokens */
--color-bg-canvas: 251 241 226;
--color-bg-subtle: 244 228 204;
--color-surface-1: 251 241 226;
--color-surface-2: 255 255 255;
--color-border-default: 232 208 173;
--color-border-strong: 216 182 139;
--color-text-primary: 90 59 40;
--color-text-secondary: 122 81 54;
--color-text-muted: 153 105 72;
--color-text-on-accent: 255 255 255;
--color-focus-ring: 79 143 159;
--color-status-info-border: 126 168 184;
--color-status-info-bg: 230 245 250;
--color-status-info-text: 31 79 106;
--color-status-warning-border: 245 158 11;
--color-status-warning-bg: 255 251 235;
--color-status-warning-text: 146 64 14;
--color-status-success-border: 187 247 208;
--color-status-success-border-strong: 74 222 128;
--color-status-success-bg: 240 253 244;
--color-status-success-bg-alt: 220 252 231;
--color-status-success-text: 21 128 61;
--color-status-success-text-strong: 22 101 52;
--color-status-danger-border: 252 165 165;
--color-status-danger-border-strong: 239 68 68;
--color-status-danger-border-soft: 219 143 143;
--color-status-danger-bg: 255 247 247;
--color-status-danger-bg-hover: 254 226 226;
--color-status-danger-text: 153 27 27;
--color-status-danger-text-strong: 127 29 29;
--color-medal-gold: 212 165 116;
--color-medal-bronze: 205 127 50;
/* Component-level semantic accents */
--color-bracket-medal-gold-bg: 255 251 245;
--color-bracket-medal-bronze-bg: 255 249 245;
--color-accent-deep-blue: 26 58 82;
--color-card-header-blue-end: 95 152 168;
--color-card-header-gold-start: 169 116 68;
--color-card-header-gold-end: 200 145 87;
--color-results-card-blue-start: 154 107 63;
--color-results-card-blue-mid: 199 145 86;
--color-results-card-blue-end: 226 189 121;
--color-results-card-gold-start: 143 99 61;
--color-results-card-gold-mid: 193 137 77;
--color-results-card-gold-end: 229 192 127;
--color-button-primary-hover: 63 121 148;
--color-button-gold-bg: 178 126 73;
--color-button-gold-hover: 199 146 87;
--color-button-teal-border: 119 174 184;
--color-button-live-bg: 255 0 0;
--color-button-live-hover: 204 0 0;
--color-hero-gradient-start: 20 47 69;
--color-hero-gradient-mid: 31 79 106;
}
html[data-theme="dark"] {
--theme-color-scheme: dark;
/* Neutral scale (dark mode keeps low indices dark, high indices light) */
--color-gray-50: 9 11 14;
--color-gray-100: 15 19 24;
--color-gray-200: 22 28 35;
--color-gray-300: 33 41 51;
--color-gray-400: 48 58 71;
--color-gray-500: 110 123 141;
--color-gray-600: 146 158 175;
--color-gray-700: 188 198 212;
--color-gray-800: 214 221 232;
--color-gray-900: 234 239 246;
--color-gray-950: 248 250 253;
/* Brand accents stay vibrant in dark mode */
--color-ocean-blue: 56 119 160;
--color-ocean-teal: 75 149 170;
--color-seafoam: 139 214 196;
--color-seafoam-deep: 116 196 176;
--color-seafoam-light: 191 236 225;
--color-sand: 224 174 101;
--color-driftwood: 196 146 81;
/* Semantic tokens */
--color-bg-canvas: 9 11 14;
--color-bg-subtle: 15 19 24;
--color-surface-1: 22 28 35;
--color-surface-2: 33 41 51;
--color-border-default: 48 58 71;
--color-border-strong: 80 93 111;
--color-text-primary: 214 221 232;
--color-text-secondary: 188 198 212;
--color-text-muted: 146 158 175;
--color-text-on-accent: 255 255 255;
--color-focus-ring: 110 186 206;
--color-status-info-border: 74 132 158;
--color-status-info-bg: 18 45 63;
--color-status-info-text: 166 214 236;
--color-status-warning-border: 217 119 6;
--color-status-warning-bg: 54 36 14;
--color-status-warning-text: 252 211 77;
--color-status-success-border: 46 102 71;
--color-status-success-border-strong: 52 140 87;
--color-status-success-bg: 21 47 34;
--color-status-success-bg-alt: 25 60 42;
--color-status-success-text: 134 239 172;
--color-status-success-text-strong: 110 231 183;
--color-status-danger-border: 185 90 90;
--color-status-danger-border-strong: 220 38 38;
--color-status-danger-border-soft: 177 89 89;
--color-status-danger-bg: 66 27 33;
--color-status-danger-bg-hover: 93 35 42;
--color-status-danger-text: 254 202 202;
--color-status-danger-text-strong: 252 165 165;
--color-medal-gold: 232 191 132;
--color-medal-bronze: 220 152 86;
/* Component-level semantic accents */
--color-bracket-medal-gold-bg: 22 28 35;
--color-bracket-medal-bronze-bg: 18 23 29;
--color-accent-deep-blue: 56 119 160;
--color-card-header-blue-end: 75 149 170;
--color-card-header-gold-start: 196 146 81;
--color-card-header-gold-end: 224 174 101;
--color-results-card-blue-start: 112 81 46;
--color-results-card-blue-mid: 176 126 70;
--color-results-card-blue-end: 224 174 101;
--color-results-card-gold-start: 104 74 43;
--color-results-card-gold-mid: 167 120 66;
--color-results-card-gold-end: 214 165 116;
--color-button-primary-hover: 75 149 170;
--color-button-gold-bg: 196 146 81;
--color-button-gold-hover: 224 174 101;
--color-button-teal-border: 110 186 206;
--color-button-live-bg: 220 38 38;
--color-button-live-hover: 185 28 28;
--color-hero-gradient-start: 13 24 35;
--color-hero-gradient-mid: 33 74 103;
}
html {
color-scheme: var(--theme-color-scheme, light);
}