/* EMSCommand design tokens — the single source of truth. Consume via var(--*) only. Never hard-code a value that lives here. Set . Spec: DESIGN_SYSTEM.md §3 (color), §4 (spacing/radius), §7 (theming contract). The theme blocks are declared on BOTH `body[...]` and `:root[...]`. The body selector is the documented contract; the :root mirror exists because the pre-Preact pages style the page ground with `html,body{...}` rules, and a custom property defined on does not cascade up to . The runtime (src/lib/theme.js) stamps the attributes on both elements. When the last html-scoped rule is gone, drop the :root mirrors and this note with it. */ :root { /* Surfaces — night (default) */ --pg: #05090F; --card: #0A1426; --deep: #060D1A; /* Text */ --tx: #F4F8FF; --tx2: #C3D2E8; --tx3: #8FA6C8; --tx4: #4A6080; /* Accent */ --gold: #F5C400; --goldT: #F5C400; --goldH: #FFDB4D; --onGold: #060D1A; /* Ink for text sitting on a saturated status fill — a red, green or amber button. Deliberately the same value in both themes: the status hues are bright in night and darkened in day, so a near-white reads on all six of them, while --tx would invert with the theme and turn the label black on a red button. Not a surface — never use it as a background. */ --onFill: #FFFFFF; --gold10: rgba(245,196,0,.10); --gold14: rgba(245,196,0,.14); --gold28: rgba(245,196,0,.28); --gold35: rgba(245,196,0,.35); --goldSel: rgba(245,196,0,.25); /* Status */ --grn: #22C55E; --grn13: rgba(34,197,94,.13); --grn30: rgba(34,197,94,.30); --amb: #F59E0B; --amb13: rgba(245,158,11,.13); --amb30: rgba(245,158,11,.30); --red: #E53E3E; --red10: rgba(229,62,62,.10); --red14: rgba(229,62,62,.14); --red16: rgba(229,62,62,.16); --red30: rgba(229,62,62,.30); /* Hairlines */ --bd03: rgba(255,255,255,.03); --bd04: rgba(255,255,255,.04); --bd05: rgba(255,255,255,.05); --bd06: rgba(255,255,255,.06); --bd07: rgba(255,255,255,.07); --bd08: rgba(255,255,255,.08); --bd09: rgba(255,255,255,.09); --bd10: rgba(255,255,255,.10); --bd11: rgba(255,255,255,.11); --bd14: rgba(255,255,255,.14); --bd16: rgba(255,255,255,.16); --scrim: rgba(3,7,13,.72); --shadow: rgba(0,0,0,.6); /* Type */ --font-head: 'Barlow Condensed', system-ui, sans-serif; --font-body: 'Barlow', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --fs-display: 52px; --fs-title: 32px; --fs-section: 22px; --fs-body: 16px; --fs-support: 15px; --fs-label: 13px; --lh-tight: 1.15; --lh-head: 1.3; --lh-body: 1.5; --lh-label: 1; --tr-tight: -.5px; --tr-section: .3px; --tr-body: .2px; --tr-label: 1.1px; /* Space */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px; /* Radius */ --r-input: 6px; --r-control: 9px; --r-card: 12px; --r-panel: 14px; --r-pill: 99px; /* Targets */ --target: 44px; --target-lg: 56px; --row-comfortable: 44px; --row-compact: 36px; --cell-pad: 16px; /* Motion */ --dur-fast: 120ms; --dur: 180ms; --dur-slow: 260ms; --ease: cubic-bezier(.2,.6,.3,1); /* Tint previews — what each paper tint's ground looks like, so the tint picker can render a swatch without reading a value out of a theme block it is not currently inside. Keep in step with the tint blocks below. */ --tint-paper: #EDF0F5; --tint-blue: #E3ECF8; --tint-pink: #F7E8EE; --tint-yellow: #F7F1DE; --tint-green: #E5F1E8; /* Layout */ --content-max: 1620px; --measure: 68ch; --sidebar: 248px; --rail: 72px; --panel-w: 420px; --safe-bottom: env(safe-area-inset-bottom, 0px); } /* ── Day theme ─────────────────────────────────────── */ body[data-theme="light"], :root[data-theme="light"] { --pg: #EDF0F5; --card: #FFFFFF; --deep: #E3E8F0; --tx: #0B1424; --tx2: #22334D; --tx3: #4A6080; --tx4: #6D819F; --gold: #F5C400; --goldT: #7A5C00; --goldH: #5E4700; --onGold: #1A1408; --gold10: rgba(245,196,0,.20); --gold14: rgba(245,196,0,.26); --gold28: rgba(168,128,0,.45); --gold35: rgba(168,128,0,.58); --goldSel: rgba(245,196,0,.35); --grn: #12703A; --grn13: rgba(18,112,58,.12); --grn30: rgba(18,112,58,.34); --amb: #96540A; --amb13: rgba(150,84,10,.12); --amb30: rgba(150,84,10,.34); --red: #B02525; --red10: rgba(176,37,37,.09); --red14: rgba(176,37,37,.12); --red16: rgba(176,37,37,.14); --red30: rgba(176,37,37,.32); --bd03: rgba(16,34,64,.04); --bd04: rgba(16,34,64,.05); --bd05: rgba(16,34,64,.06); --bd06: rgba(16,34,64,.08); --bd07: rgba(16,34,64,.09); --bd08: rgba(16,34,64,.11); --bd09: rgba(16,34,64,.07); --bd10: rgba(16,34,64,.13); --bd11: rgba(16,34,64,.15); --bd14: rgba(16,34,64,.19); --bd16: rgba(16,34,64,.22); --scrim: rgba(20,32,54,.46); --shadow: rgba(16,34,64,.22); } /* ── The modal backdrop ──────────────────────────────── ::backdrop paints in the top layer, and in engines that predate the 2023 inheritance change it inherits nothing at all — so every custom property is invalid inside it and the backdrop comes out transparent, leaving a dialog floating over a live-looking page. The one token it needs is therefore restated on the pseudo-element itself. A current engine inherits --scrim from the dialog and this says the same thing twice; an older one reads it here. The originating element is the