/* ──────────────────────────────────────────────────────────────────────────── Design tokens, shared by the map (index.php) and the device board (device.php / compare.php). Light is the base; dark is declared twice on purpose — once for the OS setting and once for the explicit toggle — so the toggle wins in both directions. Never give a colour its only definition inside one of the dark blocks. Dark is opt-in per page: the OS-preference block only bites on a document carrying data-theme-auto on . device.php and compare.php set it; index.php does not, so the map stays light regardless of the OS setting. The chart colours below are not hand-picked: they were run through the dataviz palette validator against the real pane surfaces (#FFFFFF light, #2a2a2a dark) for lightness band, chroma floor, protan/deutan separation, normal-vision separation and contrast. Changing a hex means re-running it. ──────────────────────────────────────────────────────────────────────────── */ :root { --teal-50: #E1F5EE; --teal-100: #9FE1CB; --teal-400: #1D9E75; --teal-600: #0F6E56; --teal-800: #085041; --gray-50: #F4F4F2; --gray-100: #E8E8E4; --gray-200: #CFCFC8; --gray-600: #5F5E5A; --gray-800: #2C2C2A; --text: #1a1a18; --text-muted: #6b6b66; --text-subtle: #9e9e97; --border: rgba(0,0,0,0.10); --border-mid: rgba(0,0,0,0.18); --bg: #FAFAF8; --surface: #FFFFFF; --surface-2: #F4F4F2; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --font-ui: 'Syne', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* ── chart chrome ──────────────────────────────────────────────────────── */ --chart-grid: #E8E8E4; /* hairline, 1.23:1 — recessive by design */ --chart-axis: #CFCFC8; --chart-ink: #1a1a18; --chart-ink-muted: #6b6b66; /* 5.36:1 on the light pane */ --chart-tooltip-bg: #FFFFFF; --chart-shadow: rgba(0,0,0,0.12); /* ── categorical slots, assigned in fixed order and never cycled ──────── Used for device identity in compare.php. Validated adjacent-pairwise: worst CVD ΔE 9.1, worst normal-vision ΔE 19.6. */ --cat-1: #2a78d6; /* blue */ --cat-2: #eb6834; /* orange */ --cat-3: #1baf7a; /* aqua */ --cat-4: #eda100; /* yellow */ --cat-5: #e87ba4; /* magenta */ --cat-6: #008300; /* green */ --cat-7: #4a3aa7; /* violet */ --cat-8: #e34948; /* red */ /* ── quantity identity ───────────────────────────────────────────────── One hue per measured quantity, so a gauge and its chart always agree. Each is a categorical slot above. The only pane that draws two series is fijnstof (pm25 + pm10) — that pair is magenta ↔ violet, validated all-pairs at ΔE 24.9 light / 16.0 dark. pressure, voc and voltage reuse a slot; they only ever render alone. */ --q-temperature: var(--cat-8); --q-humidity: var(--cat-1); --q-pressure: var(--cat-7); --q-luminosity: var(--cat-4); --q-uv: var(--cat-2); --q-loudness: var(--cat-6); --q-co2: var(--cat-3); --q-pm25: var(--cat-5); --q-pm10: var(--cat-7); --q-voc: var(--cat-3); --q-voltage: var(--cat-6); --q-altitude: var(--cat-7); --q-rssi: var(--cat-1); --q-snr: var(--cat-4); --q-gws: var(--cat-3); /* ── status — reserved meaning, deliberately NOT themed ──────────────── Only used for the gauge threshold bands. Never as a series colour. */ --status-good: #0ca30c; --status-warning: #fab219; --status-serious: #ec835a; --status-critical: #d03b3b; } /* ── dark: the Freeboard palette ─────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root[data-theme-auto]:not([data-theme="light"]) { --teal-50: #0B2C24; --teal-100: #11402F; --teal-400: #28B586; --teal-600: #3FCF9D; --teal-800: #9FE1CB; --gray-50: #202020; --gray-100: #363636; --gray-200: #3d3d3d; --gray-600: #a8a8a8; --gray-800: #d3d4d4; --text: #d3d4d4; --text-muted: #949494; --text-subtle: #7a7a7a; --border: rgba(255,255,255,0.08); --border-mid: rgba(255,255,255,0.16); --bg: #101214; --surface: #2a2a2a; --surface-2: #272727; --chart-grid: #3a3a3a; --chart-axis: #454545; --chart-ink: #d3d4d4; --chart-ink-muted: #949494; --chart-tooltip-bg: #1c1c1c; --chart-shadow: rgba(0,0,0,0.5); --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500; --cat-5: #d55181; --cat-6: #008300; --cat-7: #9085e9; --cat-8: #e66767; } } :root[data-theme="dark"] { --teal-50: #0B2C24; --teal-100: #11402F; --teal-400: #28B586; --teal-600: #3FCF9D; --teal-800: #9FE1CB; --gray-50: #202020; --gray-100: #363636; --gray-200: #3d3d3d; --gray-600: #a8a8a8; --gray-800: #d3d4d4; --text: #d3d4d4; --text-muted: #949494; --text-subtle: #7a7a7a; --border: rgba(255,255,255,0.08); --border-mid: rgba(255,255,255,0.16); --bg: #101214; --surface: #2a2a2a; --surface-2: #272727; --chart-grid: #3a3a3a; --chart-axis: #454545; --chart-ink: #d3d4d4; --chart-ink-muted: #949494; --chart-tooltip-bg: #1c1c1c; --chart-shadow: rgba(0,0,0,0.5); --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500; --cat-5: #d55181; --cat-6: #008300; --cat-7: #9085e9; --cat-8: #e66767; }