/* ═══════════════════════════════════════════════════════════════════════════ * M3E Colour Tokens * Source: docs/m3e/theme-tokens/ (Material Theme Builder export) * * Cascade priority: * data-contrast (explicit) > prefers-contrast (OS) > * data-theme (explicit) > prefers-color-scheme (OS) * * System mode: no data-theme attribute on → media queries decide. * Forced mode: data-theme="light" or data-theme="dark" → overrides OS. * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Layer 1: Light standard (default) ─────────────────────────────────── */ :root { --md-sys-color-primary: rgb(65 95 145); --md-sys-color-surface-tint: rgb(65 95 145); --md-sys-color-on-primary: rgb(255 255 255); --md-sys-color-primary-container: rgb(214 227 255); --md-sys-color-on-primary-container: rgb(40 71 119); --md-sys-color-secondary: rgb(86 95 113); --md-sys-color-on-secondary: rgb(255 255 255); --md-sys-color-secondary-container: rgb(218 226 249); --md-sys-color-on-secondary-container: rgb(62 71 89); --md-sys-color-tertiary: rgb(112 85 117); --md-sys-color-on-tertiary: rgb(255 255 255); --md-sys-color-tertiary-container: rgb(250 216 253); --md-sys-color-on-tertiary-container: rgb(87 62 92); --md-sys-color-error: rgb(186 26 26); --md-sys-color-on-error: rgb(255 255 255); --md-sys-color-error-container: rgb(255 218 214); --md-sys-color-on-error-container: rgb(147 0 10); --md-sys-color-background: rgb(249 249 255); --md-sys-color-on-background: rgb(25 28 32); --md-sys-color-surface: rgb(249 249 255); --md-sys-color-on-surface: rgb(25 28 32); --md-sys-color-surface-variant: rgb(224 226 236); --md-sys-color-on-surface-variant: rgb(68 71 78); --md-sys-color-outline: rgb(116 119 127); --md-sys-color-outline-variant: rgb(196 198 208); --md-sys-color-shadow: rgb(0 0 0); --md-sys-color-scrim: rgb(0 0 0); --md-sys-color-inverse-surface: rgb(46 48 54); --md-sys-color-inverse-on-surface: rgb(240 240 247); --md-sys-color-inverse-primary: rgb(170 199 255); --md-sys-color-primary-fixed: rgb(214 227 255); --md-sys-color-on-primary-fixed: rgb(0 27 62); --md-sys-color-primary-fixed-dim: rgb(170 199 255); --md-sys-color-on-primary-fixed-variant: rgb(40 71 119); --md-sys-color-secondary-fixed: rgb(218 226 249); --md-sys-color-on-secondary-fixed: rgb(19 28 43); --md-sys-color-secondary-fixed-dim: rgb(190 198 220); --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89); --md-sys-color-tertiary-fixed: rgb(250 216 253); --md-sys-color-on-tertiary-fixed: rgb(40 19 46); --md-sys-color-tertiary-fixed-dim: rgb(221 188 224); --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92); --md-sys-color-surface-dim: rgb(217 217 224); --md-sys-color-surface-bright: rgb(249 249 255); --md-sys-color-surface-container-lowest: rgb(255 255 255); --md-sys-color-surface-container-low: rgb(243 243 250); --md-sys-color-surface-container: rgb(237 237 244); --md-sys-color-surface-container-high: rgb(231 232 238); --md-sys-color-surface-container-highest: rgb(226 226 233); } /* ── Layer 2: Dark standard ────────────────────────────────────────────── */ /* 2a: Explicit dark override */ :root[data-theme="dark"] { --md-sys-color-primary: rgb(170 199 255); --md-sys-color-surface-tint: rgb(170 199 255); --md-sys-color-on-primary: rgb(10 48 95); --md-sys-color-primary-container: rgb(40 71 119); --md-sys-color-on-primary-container: rgb(214 227 255); --md-sys-color-secondary: rgb(190 198 220); --md-sys-color-on-secondary: rgb(40 49 65); --md-sys-color-secondary-container: rgb(62 71 89); --md-sys-color-on-secondary-container: rgb(218 226 249); --md-sys-color-tertiary: rgb(221 188 224); --md-sys-color-on-tertiary: rgb(63 40 68); --md-sys-color-tertiary-container: rgb(87 62 92); --md-sys-color-on-tertiary-container: rgb(250 216 253); --md-sys-color-error: rgb(255 180 171); --md-sys-color-on-error: rgb(105 0 5); --md-sys-color-error-container: rgb(147 0 10); --md-sys-color-on-error-container: rgb(255 218 214); --md-sys-color-background: rgb(17 19 24); --md-sys-color-on-background: rgb(226 226 233); --md-sys-color-surface: rgb(17 19 24); --md-sys-color-on-surface: rgb(226 226 233); --md-sys-color-surface-variant: rgb(68 71 78); --md-sys-color-on-surface-variant: rgb(196 198 208); --md-sys-color-outline: rgb(142 144 153); --md-sys-color-outline-variant: rgb(68 71 78); --md-sys-color-shadow: rgb(0 0 0); --md-sys-color-scrim: rgb(0 0 0); --md-sys-color-inverse-surface: rgb(226 226 233); --md-sys-color-inverse-on-surface: rgb(46 48 54); --md-sys-color-inverse-primary: rgb(65 95 145); --md-sys-color-primary-fixed: rgb(214 227 255); --md-sys-color-on-primary-fixed: rgb(0 27 62); --md-sys-color-primary-fixed-dim: rgb(170 199 255); --md-sys-color-on-primary-fixed-variant: rgb(40 71 119); --md-sys-color-secondary-fixed: rgb(218 226 249); --md-sys-color-on-secondary-fixed: rgb(19 28 43); --md-sys-color-secondary-fixed-dim: rgb(190 198 220); --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89); --md-sys-color-tertiary-fixed: rgb(250 216 253); --md-sys-color-on-tertiary-fixed: rgb(40 19 46); --md-sys-color-tertiary-fixed-dim: rgb(221 188 224); --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92); --md-sys-color-surface-dim: rgb(17 19 24); --md-sys-color-surface-bright: rgb(55 57 62); --md-sys-color-surface-container-lowest: rgb(12 14 19); --md-sys-color-surface-container-low: rgb(25 28 32); --md-sys-color-surface-container: rgb(29 32 36); --md-sys-color-surface-container-high: rgb(40 42 47); --md-sys-color-surface-container-highest: rgb(51 53 58); } /* 2b: OS dark preference (only when no explicit data-theme is set) */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --md-sys-color-primary: rgb(170 199 255); --md-sys-color-surface-tint: rgb(170 199 255); --md-sys-color-on-primary: rgb(10 48 95); --md-sys-color-primary-container: rgb(40 71 119); --md-sys-color-on-primary-container: rgb(214 227 255); --md-sys-color-secondary: rgb(190 198 220); --md-sys-color-on-secondary: rgb(40 49 65); --md-sys-color-secondary-container: rgb(62 71 89); --md-sys-color-on-secondary-container: rgb(218 226 249); --md-sys-color-tertiary: rgb(221 188 224); --md-sys-color-on-tertiary: rgb(63 40 68); --md-sys-color-tertiary-container: rgb(87 62 92); --md-sys-color-on-tertiary-container: rgb(250 216 253); --md-sys-color-error: rgb(255 180 171); --md-sys-color-on-error: rgb(105 0 5); --md-sys-color-error-container: rgb(147 0 10); --md-sys-color-on-error-container: rgb(255 218 214); --md-sys-color-background: rgb(17 19 24); --md-sys-color-on-background: rgb(226 226 233); --md-sys-color-surface: rgb(17 19 24); --md-sys-color-on-surface: rgb(226 226 233); --md-sys-color-surface-variant: rgb(68 71 78); --md-sys-color-on-surface-variant: rgb(196 198 208); --md-sys-color-outline: rgb(142 144 153); --md-sys-color-outline-variant: rgb(68 71 78); --md-sys-color-shadow: rgb(0 0 0); --md-sys-color-scrim: rgb(0 0 0); --md-sys-color-inverse-surface: rgb(226 226 233); --md-sys-color-inverse-on-surface: rgb(46 48 54); --md-sys-color-inverse-primary: rgb(65 95 145); --md-sys-color-primary-fixed: rgb(214 227 255); --md-sys-color-on-primary-fixed: rgb(0 27 62); --md-sys-color-primary-fixed-dim: rgb(170 199 255); --md-sys-color-on-primary-fixed-variant: rgb(40 71 119); --md-sys-color-secondary-fixed: rgb(218 226 249); --md-sys-color-on-secondary-fixed: rgb(19 28 43); --md-sys-color-secondary-fixed-dim: rgb(190 198 220); --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89); --md-sys-color-tertiary-fixed: rgb(250 216 253); --md-sys-color-on-tertiary-fixed: rgb(40 19 46); --md-sys-color-tertiary-fixed-dim: rgb(221 188 224); --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92); --md-sys-color-surface-dim: rgb(17 19 24); --md-sys-color-surface-bright: rgb(55 57 62); --md-sys-color-surface-container-lowest: rgb(12 14 19); --md-sys-color-surface-container-low: rgb(25 28 32); --md-sys-color-surface-container: rgb(29 32 36); --md-sys-color-surface-container-high: rgb(40 42 47); --md-sys-color-surface-container-highest: rgb(51 53 58); } } /* ── Layer 3: OS high contrast (prefers-contrast: more → HC tokens) ──── */ @media (prefers-contrast: more) { /* 3a: Light HC */ :root { --md-sys-color-primary: rgb(3 43 91); --md-sys-color-surface-tint: rgb(65 95 145); --md-sys-color-on-primary: rgb(255 255 255); --md-sys-color-primary-container: rgb(42 73 122); --md-sys-color-on-primary-container: rgb(255 255 255); --md-sys-color-secondary: rgb(35 44 61); --md-sys-color-on-secondary: rgb(255 255 255); --md-sys-color-secondary-container: rgb(65 73 91); --md-sys-color-on-secondary-container: rgb(255 255 255); --md-sys-color-tertiary: rgb(58 36 64); --md-sys-color-on-tertiary: rgb(255 255 255); --md-sys-color-tertiary-container: rgb(89 64 94); --md-sys-color-on-tertiary-container: rgb(255 255 255); --md-sys-color-error: rgb(96 0 4); --md-sys-color-on-error: rgb(255 255 255); --md-sys-color-error-container: rgb(152 0 10); --md-sys-color-on-error-container: rgb(255 255 255); --md-sys-color-background: rgb(249 249 255); --md-sys-color-on-background: rgb(25 28 32); --md-sys-color-surface: rgb(249 249 255); --md-sys-color-on-surface: rgb(0 0 0); --md-sys-color-surface-variant: rgb(224 226 236); --md-sys-color-on-surface-variant: rgb(0 0 0); --md-sys-color-outline: rgb(41 44 51); --md-sys-color-outline-variant: rgb(70 73 81); --md-sys-color-shadow: rgb(0 0 0); --md-sys-color-scrim: rgb(0 0 0); --md-sys-color-inverse-surface: rgb(46 48 54); --md-sys-color-inverse-on-surface: rgb(255 255 255); --md-sys-color-inverse-primary: rgb(170 199 255); --md-sys-color-primary-fixed: rgb(42 73 122); --md-sys-color-on-primary-fixed: rgb(255 255 255); --md-sys-color-primary-fixed-dim: rgb(14 50 98); --md-sys-color-on-primary-fixed-variant: rgb(255 255 255); --md-sys-color-secondary-fixed: rgb(65 73 91); --md-sys-color-on-secondary-fixed: rgb(255 255 255); --md-sys-color-secondary-fixed-dim: rgb(42 51 68); --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255); --md-sys-color-tertiary-fixed: rgb(89 64 94); --md-sys-color-on-tertiary-fixed: rgb(255 255 255); --md-sys-color-tertiary-fixed-dim: rgb(65 42 71); --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255); --md-sys-color-surface-dim: rgb(184 184 191); --md-sys-color-surface-bright: rgb(249 249 255); --md-sys-color-surface-container-lowest: rgb(255 255 255); --md-sys-color-surface-container-low: rgb(240 240 247); --md-sys-color-surface-container: rgb(226 226 233); --md-sys-color-surface-container-high: rgb(211 212 219); --md-sys-color-surface-container-highest: rgb(197 198 205); } /* 3b: Dark HC when explicitly dark */ :root[data-theme="dark"] { --md-sys-color-primary: rgb(235 240 255); --md-sys-color-surface-tint: rgb(170 199 255); --md-sys-color-on-primary: rgb(0 0 0); --md-sys-color-primary-container: rgb(166 195 252); --md-sys-color-on-primary-container: rgb(0 11 32); --md-sys-color-secondary: rgb(235 240 255); --md-sys-color-on-secondary: rgb(0 0 0); --md-sys-color-secondary-container: rgb(186 195 216); --md-sys-color-on-secondary-container: rgb(3 11 26); --md-sys-color-tertiary: rgb(255 233 255); --md-sys-color-on-tertiary: rgb(0 0 0); --md-sys-color-tertiary-container: rgb(216 184 220); --md-sys-color-on-tertiary-container: rgb(22 4 29); --md-sys-color-error: rgb(255 236 233); --md-sys-color-on-error: rgb(0 0 0); --md-sys-color-error-container: rgb(255 174 164); --md-sys-color-on-error-container: rgb(34 0 1); --md-sys-color-background: rgb(17 19 24); --md-sys-color-on-background: rgb(226 226 233); --md-sys-color-surface: rgb(17 19 24); --md-sys-color-on-surface: rgb(255 255 255); --md-sys-color-surface-variant: rgb(68 71 78); --md-sys-color-on-surface-variant: rgb(255 255 255); --md-sys-color-outline: rgb(238 239 249); --md-sys-color-outline-variant: rgb(192 194 204); --md-sys-color-shadow: rgb(0 0 0); --md-sys-color-scrim: rgb(0 0 0); --md-sys-color-inverse-surface: rgb(226 226 233); --md-sys-color-inverse-on-surface: rgb(0 0 0); --md-sys-color-inverse-primary: rgb(41 72 120); --md-sys-color-primary-fixed: rgb(214 227 255); --md-sys-color-on-primary-fixed: rgb(0 0 0); --md-sys-color-primary-fixed-dim: rgb(170 199 255); --md-sys-color-on-primary-fixed-variant: rgb(0 17 43); --md-sys-color-secondary-fixed: rgb(218 226 249); --md-sys-color-on-secondary-fixed: rgb(0 0 0); --md-sys-color-secondary-fixed-dim: rgb(190 198 220); --md-sys-color-on-secondary-fixed-variant: rgb(8 17 33); --md-sys-color-tertiary-fixed: rgb(250 216 253); --md-sys-color-on-tertiary-fixed: rgb(0 0 0); --md-sys-color-tertiary-fixed-dim: rgb(221 188 224); --md-sys-color-on-tertiary-fixed-variant: rgb(29 8 35); --md-sys-color-surface-dim: rgb(17 19 24); --md-sys-color-surface-bright: rgb(78 80 86); --md-sys-color-surface-container-lowest: rgb(0 0 0); --md-sys-color-surface-container-low: rgb(29 32 36); --md-sys-color-surface-container: rgb(46 48 54); --md-sys-color-surface-container-high: rgb(57 59 65); --md-sys-color-surface-container-highest: rgb(69 71 76); } } /* 3c: Dark HC when OS dark + no explicit data-theme */ @media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root:not([data-theme]) { --md-sys-color-primary: rgb(235 240 255); --md-sys-color-surface-tint: rgb(170 199 255); --md-sys-color-on-primary: rgb(0 0 0); --md-sys-color-primary-container: rgb(166 195 252); --md-sys-color-on-primary-container: rgb(0 11 32); --md-sys-color-secondary: rgb(235 240 255); --md-sys-color-on-secondary: rgb(0 0 0); --md-sys-color-secondary-container: rgb(186 195 216); --md-sys-color-on-secondary-container: rgb(3 11 26); --md-sys-color-tertiary: rgb(255 233 255); --md-sys-color-on-tertiary: rgb(0 0 0); --md-sys-color-tertiary-container: rgb(216 184 220); --md-sys-color-on-tertiary-container: rgb(22 4 29); --md-sys-color-error: rgb(255 236 233); --md-sys-color-on-error: rgb(0 0 0); --md-sys-color-error-container: rgb(255 174 164); --md-sys-color-on-error-container: rgb(34 0 1); --md-sys-color-background: rgb(17 19 24); --md-sys-color-on-background: rgb(226 226 233); --md-sys-color-surface: rgb(17 19 24); --md-sys-color-on-surface: rgb(255 255 255); --md-sys-color-surface-variant: rgb(68 71 78); --md-sys-color-on-surface-variant: rgb(255 255 255); --md-sys-color-outline: rgb(238 239 249); --md-sys-color-outline-variant: rgb(192 194 204); --md-sys-color-shadow: rgb(0 0 0); --md-sys-color-scrim: rgb(0 0 0); --md-sys-color-inverse-surface: rgb(226 226 233); --md-sys-color-inverse-on-surface: rgb(0 0 0); --md-sys-color-inverse-primary: rgb(41 72 120); --md-sys-color-primary-fixed: rgb(214 227 255); --md-sys-color-on-primary-fixed: rgb(0 0 0); --md-sys-color-primary-fixed-dim: rgb(170 199 255); --md-sys-color-on-primary-fixed-variant: rgb(0 17 43); --md-sys-color-secondary-fixed: rgb(218 226 249); --md-sys-color-on-secondary-fixed: rgb(0 0 0); --md-sys-color-secondary-fixed-dim: rgb(190 198 220); --md-sys-color-on-secondary-fixed-variant: rgb(8 17 33); --md-sys-color-tertiary-fixed: rgb(250 216 253); --md-sys-color-on-tertiary-fixed: rgb(0 0 0); --md-sys-color-tertiary-fixed-dim: rgb(221 188 224); --md-sys-color-on-tertiary-fixed-variant: rgb(29 8 35); --md-sys-color-surface-dim: rgb(17 19 24); --md-sys-color-surface-bright: rgb(78 80 86); --md-sys-color-surface-container-lowest: rgb(0 0 0); --md-sys-color-surface-container-low: rgb(29 32 36); --md-sys-color-surface-container: rgb(46 48 54); --md-sys-color-surface-container-high: rgb(57 59 65); --md-sys-color-surface-container-highest: rgb(69 71 76); } } /* ── Layer 4: Explicit contrast toggle via data-contrast attribute ───── */ /* 4a: data-contrast="medium" — light */ :root[data-contrast="medium"] { --md-sys-color-primary: rgb(19 54 101); --md-sys-color-surface-tint: rgb(65 95 145); --md-sys-color-on-primary: rgb(255 255 255); --md-sys-color-primary-container: rgb(80 109 160); --md-sys-color-on-primary-container: rgb(255 255 255); --md-sys-color-secondary: rgb(46 54 71); --md-sys-color-on-secondary: rgb(255 255 255); --md-sys-color-secondary-container: rgb(100 109 128); --md-sys-color-on-secondary-container: rgb(255 255 255); --md-sys-color-tertiary: rgb(69 46 74); --md-sys-color-on-tertiary: rgb(255 255 255); --md-sys-color-tertiary-container: rgb(127 100 132); --md-sys-color-on-tertiary-container: rgb(255 255 255); --md-sys-color-error: rgb(116 0 6); --md-sys-color-on-error: rgb(255 255 255); --md-sys-color-error-container: rgb(207 44 39); --md-sys-color-on-error-container: rgb(255 255 255); --md-sys-color-background: rgb(249 249 255); --md-sys-color-on-background: rgb(25 28 32); --md-sys-color-surface: rgb(249 249 255); --md-sys-color-on-surface: rgb(15 17 22); --md-sys-color-surface-variant: rgb(224 226 236); --md-sys-color-on-surface-variant: rgb(51 54 62); --md-sys-color-outline: rgb(79 82 90); --md-sys-color-outline-variant: rgb(106 109 117); --md-sys-color-shadow: rgb(0 0 0); --md-sys-color-scrim: rgb(0 0 0); --md-sys-color-inverse-surface: rgb(46 48 54); --md-sys-color-inverse-on-surface: rgb(240 240 247); --md-sys-color-inverse-primary: rgb(170 199 255); --md-sys-color-primary-fixed: rgb(80 109 160); --md-sys-color-on-primary-fixed: rgb(255 255 255); --md-sys-color-primary-fixed-dim: rgb(55 85 134); --md-sys-color-on-primary-fixed-variant: rgb(255 255 255); --md-sys-color-secondary-fixed: rgb(100 109 128); --md-sys-color-on-secondary-fixed: rgb(255 255 255); --md-sys-color-secondary-fixed-dim: rgb(76 85 103); --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255); --md-sys-color-tertiary-fixed: rgb(127 100 132); --md-sys-color-on-tertiary-fixed: rgb(255 255 255); --md-sys-color-tertiary-fixed-dim: rgb(101 76 107); --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255); --md-sys-color-surface-dim: rgb(197 198 205); --md-sys-color-surface-bright: rgb(249 249 255); --md-sys-color-surface-container-lowest: rgb(255 255 255); --md-sys-color-surface-container-low: rgb(243 243 250); --md-sys-color-surface-container: rgb(231 232 238); --md-sys-color-surface-container-high: rgb(220 220 227); --md-sys-color-surface-container-highest: rgb(209 209 216); } /* 4b: data-contrast="medium" — explicit dark */ :root[data-contrast="medium"][data-theme="dark"] { --md-sys-color-primary: rgb(205 221 255); --md-sys-color-surface-tint: rgb(170 199 255); --md-sys-color-on-primary: rgb(0 37 81); --md-sys-color-primary-container: rgb(116 145 199); --md-sys-color-on-primary-container: rgb(0 0 0); --md-sys-color-secondary: rgb(212 220 242); --md-sys-color-on-secondary: rgb(29 38 54); --md-sys-color-secondary-container: rgb(136 145 165); --md-sys-color-on-secondary-container: rgb(0 0 0); --md-sys-color-tertiary: rgb(243 210 247); --md-sys-color-on-tertiary: rgb(51 29 57); --md-sys-color-tertiary-container: rgb(164 135 169); --md-sys-color-on-tertiary-container: rgb(0 0 0); --md-sys-color-error: rgb(255 210 204); --md-sys-color-on-error: rgb(84 0 3); --md-sys-color-error-container: rgb(255 84 73); --md-sys-color-on-error-container: rgb(0 0 0); --md-sys-color-background: rgb(17 19 24); --md-sys-color-on-background: rgb(226 226 233); --md-sys-color-surface: rgb(17 19 24); --md-sys-color-on-surface: rgb(255 255 255); --md-sys-color-surface-variant: rgb(68 71 78); --md-sys-color-on-surface-variant: rgb(218 220 230); --md-sys-color-outline: rgb(175 178 187); --md-sys-color-outline-variant: rgb(142 144 153); --md-sys-color-shadow: rgb(0 0 0); --md-sys-color-scrim: rgb(0 0 0); --md-sys-color-inverse-surface: rgb(226 226 233); --md-sys-color-inverse-on-surface: rgb(40 42 47); --md-sys-color-inverse-primary: rgb(41 72 120); --md-sys-color-primary-fixed: rgb(214 227 255); --md-sys-color-on-primary-fixed: rgb(0 17 43); --md-sys-color-primary-fixed-dim: rgb(170 199 255); --md-sys-color-on-primary-fixed-variant: rgb(19 54 101); --md-sys-color-secondary-fixed: rgb(218 226 249); --md-sys-color-on-secondary-fixed: rgb(8 17 33); --md-sys-color-secondary-fixed-dim: rgb(190 198 220); --md-sys-color-on-secondary-fixed-variant: rgb(46 54 71); --md-sys-color-tertiary-fixed: rgb(250 216 253); --md-sys-color-on-tertiary-fixed: rgb(29 8 35); --md-sys-color-tertiary-fixed-dim: rgb(221 188 224); --md-sys-color-on-tertiary-fixed-variant: rgb(69 46 74); --md-sys-color-surface-dim: rgb(17 19 24); --md-sys-color-surface-bright: rgb(67 68 74); --md-sys-color-surface-container-lowest: rgb(6 7 12); --md-sys-color-surface-container-low: rgb(27 30 34); --md-sys-color-surface-container: rgb(38 40 45); --md-sys-color-surface-container-high: rgb(49 50 56); --md-sys-color-surface-container-highest: rgb(60 62 67); } /* 4c: data-contrast="medium" — OS dark, no forced theme */ @media (prefers-color-scheme: dark) { :root[data-contrast="medium"]:not([data-theme]) { --md-sys-color-primary: rgb(205 221 255); --md-sys-color-surface-tint: rgb(170 199 255); --md-sys-color-on-primary: rgb(0 37 81); --md-sys-color-primary-container: rgb(116 145 199); --md-sys-color-on-primary-container: rgb(0 0 0); --md-sys-color-secondary: rgb(212 220 242); --md-sys-color-on-secondary: rgb(29 38 54); --md-sys-color-secondary-container: rgb(136 145 165); --md-sys-color-on-secondary-container: rgb(0 0 0); --md-sys-color-tertiary: rgb(243 210 247); --md-sys-color-on-tertiary: rgb(51 29 57); --md-sys-color-tertiary-container: rgb(164 135 169); --md-sys-color-on-tertiary-container: rgb(0 0 0); --md-sys-color-error: rgb(255 210 204); --md-sys-color-on-error: rgb(84 0 3); --md-sys-color-error-container: rgb(255 84 73); --md-sys-color-on-error-container: rgb(0 0 0); --md-sys-color-background: rgb(17 19 24); --md-sys-color-on-background: rgb(226 226 233); --md-sys-color-surface: rgb(17 19 24); --md-sys-color-on-surface: rgb(255 255 255); --md-sys-color-surface-variant: rgb(68 71 78); --md-sys-color-on-surface-variant: rgb(218 220 230); --md-sys-color-outline: rgb(175 178 187); --md-sys-color-outline-variant: rgb(142 144 153); --md-sys-color-shadow: rgb(0 0 0); --md-sys-color-scrim: rgb(0 0 0); --md-sys-color-inverse-surface: rgb(226 226 233); --md-sys-color-inverse-on-surface: rgb(40 42 47); --md-sys-color-inverse-primary: rgb(41 72 120); --md-sys-color-primary-fixed: rgb(214 227 255); --md-sys-color-on-primary-fixed: rgb(0 17 43); --md-sys-color-primary-fixed-dim: rgb(170 199 255); --md-sys-color-on-primary-fixed-variant: rgb(19 54 101); --md-sys-color-secondary-fixed: rgb(218 226 249); --md-sys-color-on-secondary-fixed: rgb(8 17 33); --md-sys-color-secondary-fixed-dim: rgb(190 198 220); --md-sys-color-on-secondary-fixed-variant: rgb(46 54 71); --md-sys-color-tertiary-fixed: rgb(250 216 253); --md-sys-color-on-tertiary-fixed: rgb(29 8 35); --md-sys-color-tertiary-fixed-dim: rgb(221 188 224); --md-sys-color-on-tertiary-fixed-variant: rgb(69 46 74); --md-sys-color-surface-dim: rgb(17 19 24); --md-sys-color-surface-bright: rgb(67 68 74); --md-sys-color-surface-container-lowest: rgb(6 7 12); --md-sys-color-surface-container-low: rgb(27 30 34); --md-sys-color-surface-container: rgb(38 40 45); --md-sys-color-surface-container-high: rgb(49 50 56); --md-sys-color-surface-container-highest: rgb(60 62 67); } } /* 4d: data-contrast="high" — light */ :root[data-contrast="high"] { --md-sys-color-primary: rgb(3 43 91); --md-sys-color-surface-tint: rgb(65 95 145); --md-sys-color-on-primary: rgb(255 255 255); --md-sys-color-primary-container: rgb(42 73 122); --md-sys-color-on-primary-container: rgb(255 255 255); --md-sys-color-secondary: rgb(35 44 61); --md-sys-color-on-secondary: rgb(255 255 255); --md-sys-color-secondary-container: rgb(65 73 91); --md-sys-color-on-secondary-container: rgb(255 255 255); --md-sys-color-tertiary: rgb(58 36 64); --md-sys-color-on-tertiary: rgb(255 255 255); --md-sys-color-tertiary-container: rgb(89 64 94); --md-sys-color-on-tertiary-container: rgb(255 255 255); --md-sys-color-error: rgb(96 0 4); --md-sys-color-on-error: rgb(255 255 255); --md-sys-color-error-container: rgb(152 0 10); --md-sys-color-on-error-container: rgb(255 255 255); --md-sys-color-background: rgb(249 249 255); --md-sys-color-on-background: rgb(25 28 32); --md-sys-color-surface: rgb(249 249 255); --md-sys-color-on-surface: rgb(0 0 0); --md-sys-color-surface-variant: rgb(224 226 236); --md-sys-color-on-surface-variant: rgb(0 0 0); --md-sys-color-outline: rgb(41 44 51); --md-sys-color-outline-variant: rgb(70 73 81); --md-sys-color-shadow: rgb(0 0 0); --md-sys-color-scrim: rgb(0 0 0); --md-sys-color-inverse-surface: rgb(46 48 54); --md-sys-color-inverse-on-surface: rgb(255 255 255); --md-sys-color-inverse-primary: rgb(170 199 255); --md-sys-color-primary-fixed: rgb(42 73 122); --md-sys-color-on-primary-fixed: rgb(255 255 255); --md-sys-color-primary-fixed-dim: rgb(14 50 98); --md-sys-color-on-primary-fixed-variant: rgb(255 255 255); --md-sys-color-secondary-fixed: rgb(65 73 91); --md-sys-color-on-secondary-fixed: rgb(255 255 255); --md-sys-color-secondary-fixed-dim: rgb(42 51 68); --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255); --md-sys-color-tertiary-fixed: rgb(89 64 94); --md-sys-color-on-tertiary-fixed: rgb(255 255 255); --md-sys-color-tertiary-fixed-dim: rgb(65 42 71); --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255); --md-sys-color-surface-dim: rgb(184 184 191); --md-sys-color-surface-bright: rgb(249 249 255); --md-sys-color-surface-container-lowest: rgb(255 255 255); --md-sys-color-surface-container-low: rgb(240 240 247); --md-sys-color-surface-container: rgb(226 226 233); --md-sys-color-surface-container-high: rgb(211 212 219); --md-sys-color-surface-container-highest: rgb(197 198 205); } /* 4e: data-contrast="high" — explicit dark */ :root[data-contrast="high"][data-theme="dark"] { --md-sys-color-primary: rgb(235 240 255); --md-sys-color-surface-tint: rgb(170 199 255); --md-sys-color-on-primary: rgb(0 0 0); --md-sys-color-primary-container: rgb(166 195 252); --md-sys-color-on-primary-container: rgb(0 11 32); --md-sys-color-secondary: rgb(235 240 255); --md-sys-color-on-secondary: rgb(0 0 0); --md-sys-color-secondary-container: rgb(186 195 216); --md-sys-color-on-secondary-container: rgb(3 11 26); --md-sys-color-tertiary: rgb(255 233 255); --md-sys-color-on-tertiary: rgb(0 0 0); --md-sys-color-tertiary-container: rgb(216 184 220); --md-sys-color-on-tertiary-container: rgb(22 4 29); --md-sys-color-error: rgb(255 236 233); --md-sys-color-on-error: rgb(0 0 0); --md-sys-color-error-container: rgb(255 174 164); --md-sys-color-on-error-container: rgb(34 0 1); --md-sys-color-background: rgb(17 19 24); --md-sys-color-on-background: rgb(226 226 233); --md-sys-color-surface: rgb(17 19 24); --md-sys-color-on-surface: rgb(255 255 255); --md-sys-color-surface-variant: rgb(68 71 78); --md-sys-color-on-surface-variant: rgb(255 255 255); --md-sys-color-outline: rgb(238 239 249); --md-sys-color-outline-variant: rgb(192 194 204); --md-sys-color-shadow: rgb(0 0 0); --md-sys-color-scrim: rgb(0 0 0); --md-sys-color-inverse-surface: rgb(226 226 233); --md-sys-color-inverse-on-surface: rgb(0 0 0); --md-sys-color-inverse-primary: rgb(41 72 120); --md-sys-color-primary-fixed: rgb(214 227 255); --md-sys-color-on-primary-fixed: rgb(0 0 0); --md-sys-color-primary-fixed-dim: rgb(170 199 255); --md-sys-color-on-primary-fixed-variant: rgb(0 17 43); --md-sys-color-secondary-fixed: rgb(218 226 249); --md-sys-color-on-secondary-fixed: rgb(0 0 0); --md-sys-color-secondary-fixed-dim: rgb(190 198 220); --md-sys-color-on-secondary-fixed-variant: rgb(8 17 33); --md-sys-color-tertiary-fixed: rgb(250 216 253); --md-sys-color-on-tertiary-fixed: rgb(0 0 0); --md-sys-color-tertiary-fixed-dim: rgb(221 188 224); --md-sys-color-on-tertiary-fixed-variant: rgb(29 8 35); --md-sys-color-surface-dim: rgb(17 19 24); --md-sys-color-surface-bright: rgb(78 80 86); --md-sys-color-surface-container-lowest: rgb(0 0 0); --md-sys-color-surface-container-low: rgb(29 32 36); --md-sys-color-surface-container: rgb(46 48 54); --md-sys-color-surface-container-high: rgb(57 59 65); --md-sys-color-surface-container-highest: rgb(69 71 76); } /* 4f: data-contrast="high" — OS dark, no forced theme */ @media (prefers-color-scheme: dark) { :root[data-contrast="high"]:not([data-theme]) { --md-sys-color-primary: rgb(235 240 255); --md-sys-color-surface-tint: rgb(170 199 255); --md-sys-color-on-primary: rgb(0 0 0); --md-sys-color-primary-container: rgb(166 195 252); --md-sys-color-on-primary-container: rgb(0 11 32); --md-sys-color-secondary: rgb(235 240 255); --md-sys-color-on-secondary: rgb(0 0 0); --md-sys-color-secondary-container: rgb(186 195 216); --md-sys-color-on-secondary-container: rgb(3 11 26); --md-sys-color-tertiary: rgb(255 233 255); --md-sys-color-on-tertiary: rgb(0 0 0); --md-sys-color-tertiary-container: rgb(216 184 220); --md-sys-color-on-tertiary-container: rgb(22 4 29); --md-sys-color-error: rgb(255 236 233); --md-sys-color-on-error: rgb(0 0 0); --md-sys-color-error-container: rgb(255 174 164); --md-sys-color-on-error-container: rgb(34 0 1); --md-sys-color-background: rgb(17 19 24); --md-sys-color-on-background: rgb(226 226 233); --md-sys-color-surface: rgb(17 19 24); --md-sys-color-on-surface: rgb(255 255 255); --md-sys-color-surface-variant: rgb(68 71 78); --md-sys-color-on-surface-variant: rgb(255 255 255); --md-sys-color-outline: rgb(238 239 249); --md-sys-color-outline-variant: rgb(192 194 204); --md-sys-color-shadow: rgb(0 0 0); --md-sys-color-scrim: rgb(0 0 0); --md-sys-color-inverse-surface: rgb(226 226 233); --md-sys-color-inverse-on-surface: rgb(0 0 0); --md-sys-color-inverse-primary: rgb(41 72 120); --md-sys-color-primary-fixed: rgb(214 227 255); --md-sys-color-on-primary-fixed: rgb(0 0 0); --md-sys-color-primary-fixed-dim: rgb(170 199 255); --md-sys-color-on-primary-fixed-variant: rgb(0 17 43); --md-sys-color-secondary-fixed: rgb(218 226 249); --md-sys-color-on-secondary-fixed: rgb(0 0 0); --md-sys-color-secondary-fixed-dim: rgb(190 198 220); --md-sys-color-on-secondary-fixed-variant: rgb(8 17 33); --md-sys-color-tertiary-fixed: rgb(250 216 253); --md-sys-color-on-tertiary-fixed: rgb(0 0 0); --md-sys-color-tertiary-fixed-dim: rgb(221 188 224); --md-sys-color-on-tertiary-fixed-variant: rgb(29 8 35); --md-sys-color-surface-dim: rgb(17 19 24); --md-sys-color-surface-bright: rgb(78 80 86); --md-sys-color-surface-container-lowest: rgb(0 0 0); --md-sys-color-surface-container-low: rgb(29 32 36); --md-sys-color-surface-container: rgb(46 48 54); --md-sys-color-surface-container-high: rgb(57 59 65); --md-sys-color-surface-container-highest: rgb(69 71 76); } }