/* Sunroof design tokens: "The Horizon". Every colour, size and duration in the app comes from here. No hex codes or magic numbers anywhere else. Two schemes, light and dark, chosen by the sky engine (js/sky.js) from the real sun times at the house, not from the device setting. The engine sets data-scheme on and overrides --sky-top / --sky-bottom continuously through the day. The values below are the midday and midnight defaults, and the device setting is only the fallback before JavaScript has run. */ :root, [data-scheme="light"] { color-scheme: light; /* Sky field (top of the Now column and page backdrop). Engine-driven. */ --sky-top: #bfddf7; --sky-bottom: #f2f6fa; /* Ground and surfaces */ --ground: #f2f6fa; /* page below the horizon */ --surface: #ffffff; /* time strip, panels */ --surface-2: #e9eff5; /* inset wells, segmented-control track */ --line: rgb(15 26 42 / 0.12); --line-strong: rgb(15 26 42 / 0.28); /* Ink */ --ink: #0f1a2a; --ink-2: #46566b; /* secondary text on ground and surface only */ --on-sky-2: rgb(15 26 42 / 0.8); /* secondary text on the sky: ink-tinted, never grey */ --ink-inverse: #ffffff; /* Meaning. Amber is the sun and solar power, and is never used for text. Blue is grid, price and stored energy. Red appears only when money is being lost or something has failed. */ --sun: #f6a609; --sun-halo: rgb(246 166 9 / 0.25); --blue: #2f7dd1; /* fills and strokes */ --blue-text: #1f64b0; /* blue when it has to be read as text */ --loss: #c8372d; --loss-soft: #fbe9e7; --warn-soft: #fdf0d2; --track: #dde6ee; /* gauge track, skeletons */ --focus: #1f64b0; --selection: rgb(47 125 209 / 0.22); --shadow: 0 1px 2px rgb(15 26 42 / 0.06), 0 8px 24px -8px rgb(15 26 42 / 0.14); /* Type: one family. The system face is deliberate: every device that opens Sunroof is Apple, SF has true tabular figures, and the NAS serves no third-party requests. */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --t-display: 3.625rem; /* the live figure */ --t-display-wide: 4.5rem; --t-title: 1.4375rem; /* the verdict sentence */ --t-data: 1.25rem; /* readings */ --t-head: 1.0625rem; --t-body: 0.9375rem; --t-small: 0.8125rem; --t-label: 0.6875rem; /* tracked small caps */ /* SVG type uses user units in the 390 × 384 viewBox, so these px values deliberately scale with the drawing rather than the browser root. */ --svg-figure: 58px; --svg-phrase: 13px; --svg-value: 16px; --svg-label: 10.5px; --svg-state: 11.5px; --track-label: 0.09em; --track-display: -0.03em; --w-regular: 450; --w-medium: 550; --w-bold: 700; --lh-tight: 1.15; --lh-body: 1.45; /* Space: 4 px base */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --gutter: var(--s-5); --tap: 2.75rem; /* minimum touch target, 44 px */ /* Shape */ --r-pill: 999px; --r-panel: 0.875rem; --r-small: 0.5rem; --stroke: 1.5px; /* drawn linework: arc, icons, outlines */ --stroke-heavy: 2px; /* the NOW line */ /* Line style carries state; colour never does it alone. solid = live, dashed = idle, dotted = planned (not connected yet), gap = capped. */ --dash-idle: 6 6; --dash-planned: 1 7; --dash-arc: 1 7; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --d-value: 180ms; /* number cross-fades */ --d-ui: 240ms; /* tabs, panels, controls */ --d-scheme: 1200ms; /* dusk and dawn scheme change */ /* Missing from the decided set: the loading skeleton's pulse cycle. */ --d-skeleton: 1.6s; /* Layout */ --bp-mid: 45rem; /* 720 px: two columns */ --col-control: 19rem; --col-log: 20rem; --page-max: 93.75rem; --bp-wide: 73.75rem; /* 1180 px: enough room for the three columns */ --arc-max-width: 30rem; --sky-height: 20.5rem; --strip-height: 9.5rem; --header-overlay-h: calc(var(--tap) + var(--s-5)); --strip-pill-top: 0.375rem; --strip-pill-h: 1.75rem; /* Missing from the decided set: the device gauges need one more size, the pill track's height (spec: "14 px tall"). 0.875rem = 14px at the root. */ --gauge-track-h: 0.875rem; } /* Dark scheme: after dusk, before dawn. Works on any element so the gallery can show both schemes side by side. */ [data-scheme="dark"] { color-scheme: dark; --sky-top: #0a1322; --sky-bottom: #121e33; --ground: #0e1828; --surface: #152238; --surface-2: #1c2b45; --line: rgb(234 240 248 / 0.14); --line-strong: rgb(234 240 248 / 0.32); --ink: #eaf0f8; --ink-2: #a9b7cb; --on-sky-2: rgb(234 240 248 / 0.8); --ink-inverse: #0f1a2a; --sun: #ffb938; --sun-halo: rgb(255 185 56 / 0.22); --blue: #5aa2f0; --blue-text: #8cc0ff; --loss: #ff7a6e; --loss-soft: #3a1c1f; --warn-soft: #3a2e14; --track: #22314a; --focus: #8cc0ff; --selection: rgb(90 162 240 / 0.3); --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -8px rgb(0 0 0 / 0.5); } /* Before the sky engine runs (or if JavaScript fails), fall back to the device. */ @media (prefers-color-scheme: dark) { :root:not([data-scheme]) { color-scheme: dark; --sky-top: #0a1322; --sky-bottom: #121e33; --ground: #0e1828; --surface: #152238; --surface-2: #1c2b45; --line: rgb(234 240 248 / 0.14); --line-strong: rgb(234 240 248 / 0.32); --ink: #eaf0f8; --ink-2: #a9b7cb; --on-sky-2: rgb(234 240 248 / 0.8); --ink-inverse: #0f1a2a; --sun: #ffb938; --sun-halo: rgb(255 185 56 / 0.22); --blue: #5aa2f0; --blue-text: #8cc0ff; --loss: #ff7a6e; --loss-soft: #3a1c1f; --warn-soft: #3a2e14; --track: #22314a; --focus: #8cc0ff; --selection: rgb(90 162 240 / 0.3); --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -8px rgb(0 0 0 / 0.5); } } @media (prefers-reduced-motion: reduce) { :root { --d-ui: 1ms; --d-scheme: 1ms; } }