/** * Light Hill design tokens — namespaced primitives (--lh-*). * * Every app imports this file, whatever its framework or theme. * These power cross-app UI (the shared nav, auth screens) so platform * chrome looks identical even on apps with their own visual identity * (beacon's status wall, recon's field PWA, sentinel's paper look). * * App-specific themes may alias their own vars to these, but the * --lh-* namespace never collides with app-local custom properties. */ :root { /* Brand */ --lh-accent: #2aa3e6; --lh-accent-soft: rgba(42, 163, 230, 0.13); --lh-accent-line: rgba(42, 163, 230, 0.38); /* Surfaces (dark platform chrome) */ --lh-bg: #0c0d11; --lh-panel: #15171d; --lh-panel-2: #1b1e26; --lh-panel-hover: #232732; --lh-border: #2b303b; --lh-border-soft: #21252e; /* Text */ --lh-text: #f2f5f9; --lh-text-muted: #a5adbb; --lh-text-dim: #6d7684; /* Status */ --lh-good: #2fd6c0; --lh-info: #4296f0; --lh-warn: #f5c84a; --lh-alert: #f08a3c; --lh-bad: #e8478f; /* Typography */ --lh-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --lh-font-display: 'Barlow Condensed', 'Arial Narrow', -apple-system, sans-serif; --lh-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; /* Shape & depth */ --lh-radius: 10px; --lh-radius-pill: 999px; --lh-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 44px rgba(0, 0, 0, 0.4); /* Spacing scale */ --lh-space-1: 4px; --lh-space-2: 8px; --lh-space-3: 12px; --lh-space-4: 16px; --lh-space-5: 24px; --lh-space-6: 32px; } /** * Light theme — OPT-IN, and deliberately so. * * This block applies only when an app sets data-theme="light" on . An app * that never sets the attribute renders byte-identically to the dark values * above, which is why adding this is safe for a fleet where every other app * assumes dark chrome. There is intentionally NO `prefers-color-scheme` rule * here: honouring the OS is a per-app decision (Field does it, the status wall * on a lab display must not), so it belongs in the app, not the token layer. * * These are not inverted dark values. Brand and status hues are DARKENED for a * light background — #2aa3e6 on white is roughly 2.5:1 and unreadable outdoors, * where this theme actually gets used. Every foreground below clears 4.5:1 on * its intended surface. * * Adopted first by apps/field (a phone used in daylight). Any app can opt in by * setting the attribute; nothing needs to change here to do so. * * NOTE: the :root block above deliberately does NOT declare `color-scheme: * dark`. It would be accurate for most of the fleet but it is not universal — * sentinel is intentionally light — and it would silently restyle scrollbars * and form controls everywhere. `color-scheme` is set only inside this opt-in * block, where the app has already asked for it. */ :root[data-theme='light'] { /* Brand — darkened for contrast on white; the dark theme's #2aa3e6 is a light-on-dark value and fails as a foreground here. */ --lh-accent: #0f7cb8; --lh-accent-soft: rgba(15, 124, 184, 0.10); --lh-accent-line: rgba(15, 124, 184, 0.35); /* Surfaces — slightly cool, panels lighter than the page so cards lift rather than recede (the inverse of the dark theme's relationship). */ --lh-bg: #f4f6f9; --lh-panel: #ffffff; --lh-panel-2: #eef1f5; --lh-panel-hover: #e4e9f0; --lh-border: #cdd4de; --lh-border-soft: #e2e7ee; /* Text */ --lh-text: #10131a; --lh-text-muted: #4a5261; --lh-text-dim: #6b7382; /* Status — same semantics, re-tuned as foregrounds on a light surface. */ --lh-good: #0a8f7d; --lh-info: #1b6fd0; --lh-warn: #8a5d00; --lh-alert: #b8551a; --lh-bad: #c62a6a; /* Shadow is light-theme's depth cue; the dark theme's near-black glow reads as dirt on white. */ --lh-shadow: 0 1px 2px rgba(16, 19, 26, 0.06), 0 12px 32px rgba(16, 19, 26, 0.10); color-scheme: light; }