/* ════════════════════════════════════════════════════════════════════════ SIGNAL ENGINE — SHARED THEME LAYER (dark default + light mode) Load FIRST, before every page's own stylesheet. HOW THIS WORKS • Dark is the default and is UNCHANGED: the existing per-page :root token values (--bg, --surface, --text, --accent, …) are NOT redefined here, so dark renders exactly as before. • Light mode activates on (remove the attribute for dark — never a class). It (a) re-declares the canonical --se-* tokens to the handoff's exact light values, and (b) BRIDGES the codebase's existing token names to those light values, so every component that already uses var(--…) restyles itself with no markup change. Canonical --se-* values are verbatim from the design handoff (tokens-colors-dark.css / se-theme-light.css). The bridge block reconciles the production token vocabulary (navy/blue dark) onto the light palette; see the report for the exact mapping and derived (non-handoff) values. ════════════════════════════════════════════════════════════════════════ */ /* ── Canonical design tokens — DARK (handoff reference, additive) ────────── */ :root { --se-bg: #1c2025; --se-surface: #232830; --se-surface-2: #2c323a; --se-surface-3: #363c46; --se-line: rgba(255, 255, 255, 0.10); --se-line-quiet: rgba(255, 255, 255, 0.06); --se-line-strong: rgba(255, 255, 255, 0.16); --se-fg: #f1f2f4; --se-fg-2: rgba(241, 242, 244, 0.74); --se-fg-3: rgba(241, 242, 244, 0.48); --se-fg-4: rgba(241, 242, 244, 0.30); --se-ember: #ff7a4d; --se-ember-light: #ffb38a; --se-ember-deep: #c75a35; --se-ember-wash: rgba(255, 122, 77, 0.12); --se-ember-glow: rgba(255, 122, 77, 0.18); --se-cyan: #6ed1e8; --se-cyan-deep: #3aa1bb; --se-cyan-wash: rgba(110, 209, 232, 0.12); --se-cyan-glow: rgba(110, 209, 232, 0.15); --se-amber: #ffcc4d; --se-amber-wash: rgba(255, 204, 77, 0.12); --se-steel: #8a94a3; --se-status-live: var(--se-ember); --se-status-up: var(--se-ember); --se-status-down: var(--se-cyan); --se-status-caution: var(--se-amber); --se-selection-bg: var(--se-ember); --se-selection-fg: var(--se-bg); } /* ── LIGHT MODE ─────────────────────────────────────────────────────────── */ :root[data-se-theme="light"], [data-se-theme="light"], .se-theme-light { /* Canonical --se-* — VERBATIM from se-theme-light.css */ --se-bg: #f4f3f0; --se-surface: #fdfdfc; --se-surface-2: #ecebe7; --se-surface-3: #e2e0db; --se-line: rgba(28, 32, 37, 0.12); --se-line-quiet: rgba(28, 32, 37, 0.07); --se-line-strong: rgba(28, 32, 37, 0.20); --se-fg: #1c2025; --se-fg-2: rgba(28, 32, 37, 0.72); --se-fg-3: rgba(28, 32, 37, 0.50); --se-fg-4: rgba(28, 32, 37, 0.32); --se-ember: #e0562a; --se-ember-light: #ff7a4d; --se-ember-deep: #b04218; --se-ember-wash: rgba(224, 86, 42, 0.10); --se-ember-glow: rgba(224, 86, 42, 0.16); --se-cyan: #2e8fa8; --se-cyan-deep: #237084; --se-cyan-wash: rgba(46, 143, 168, 0.10); --se-cyan-glow: rgba(46, 143, 168, 0.14); --se-amber: #b58117; --se-amber-wash: rgba(181, 129, 23, 0.12); --se-steel: #6b7686; --se-status-live: var(--se-ember); --se-status-up: var(--se-ember); --se-status-down: var(--se-cyan); --se-status-caution: var(--se-amber); --se-selection-bg: var(--se-ember); --se-selection-fg: #f4f3f0; color-scheme: light; } /* ── BRIDGE: existing production token names → light values ────────────── Only under the light selector, so dark keeps every original value. :root[data-se-theme="light"] beats each page's plain :root on specificity. */ :root[data-se-theme="light"], [data-se-theme="light"], .se-theme-light { /* surfaces / elevation (styles.css, admin/entities/market-forces, workspace) */ --bg: var(--se-bg); /* #f4f3f0 */ --bg-surface: var(--se-surface-2); /* elevation-1 in styles.css */ --bg-card: var(--se-surface); /* #fdfdfc primary card */ --bg-hover: var(--se-surface-3); --surface: var(--se-surface); --surface-2: var(--se-surface-2); --surface2: var(--se-surface-2); --surface-3: var(--se-surface-3); /* hairlines */ --border: var(--se-line); --border-mid: rgba(28, 32, 37, 0.16); /* derived: mid step between .12/.20 */ --border-hi: var(--se-line-strong); --border2: var(--se-line-strong); /* foreground (opacity hierarchy) ⚠ Accessibility override of the handoff opacity steps: the 50% tier (--se-fg-3 ≈ 3.4:1 on paper) fails 4.5:1 for small text, so the caption/label tier is strengthened here. The canonical --se-fg-* values stay verbatim above; only the production text-token BRIDGE is deepened. faint/text-faint stay decorative (inactive/meta only — never small informational captions). */ --text: var(--se-fg); /* #1c2025 ~14.5:1 AAA */ --text-sec: var(--se-fg-2); /* 72% ~6:1 AAA */ --text-dim: rgba(28, 32, 37, 0.66); /* ~4.8:1 AA (small text) */ --muted: rgba(28, 32, 37, 0.66); /* ~4.8:1 AA (small text) */ --text-faint: rgba(28, 32, 37, 0.50); /* decorative/inactive only */ --faint: rgba(28, 32, 37, 0.50); /* decorative/inactive only */ /* accents — production UI accent is BLUE; handoff has no blue → deepened cyan. The UI/link accent uses cyan-DEEP so small accent text (links, eyebrows, pill labels) clears 4.5:1; -lo keeps the brighter cyan for large fills/graphics. Ember stays ember (glyphs/live-state/large accents; ~4.4:1 — never small body). */ --accent: var(--se-cyan-deep); /* #237084 ~4.8:1 small accent text */ --accent-lo: var(--se-cyan-deep); /* #237084 ~4.8:1 — used for LINK text (styles.css a{}), so must clear 4.5:1, not the 3.3:1 bright cyan */ --accent-dim: var(--se-cyan-wash); --ember: var(--se-ember); /* #e0562a glyphs/live/large accents */ --ember-dim: var(--se-ember-wash); /* semantic status — NOT supplied by the handoff; derived for contrast on paper */ --green: #15803d; --green-dim: rgba(21, 128, 61, 0.12); --red: #b91c1c; --red-dim: rgba(185, 28, 28, 0.10); --amber: var(--se-amber); /* #b58117 (handoff) */ --amber-dim: var(--se-amber-wash); --purple: #7c3aed; --purple-dim: rgba(124, 58, 237, 0.10); /* pressure-field intensity scale (styles.css) */ --int-critical: #b91c1c; --int-high: var(--se-amber); --int-mid: var(--se-cyan); --int-low: var(--se-steel); /* elevation shadow — lighter/subtler on paper (handoff note) */ --shadow: 0 1px 3px rgba(28, 32, 37, 0.08), 0 4px 16px rgba(28, 32, 37, 0.06); } /* ── Contrast safety: SMALL ember text on paper needs the deeper ember (≥4.5:1). --se-ember (#e0562a, ~4.4:1) is kept for glyphs / live dots / large accents (graphics ≥3:1). These small (<14px) labels get --se-ember-deep (#b04218, ~6.6:1). */ :root[data-se-theme="light"] .brief-env-tag, :root[data-se-theme="light"] .ws-identity-env, :root[data-se-theme="light"] .ws-cand-mechanism-label { color: var(--se-ember-deep); } /* ── Page-root paint + calm cross-fade (no theatrical transition) ────────── */ html { background: var(--se-bg); } html, body { transition: background-color .3s ease, color .3s ease; } ::selection { background: var(--se-selection-bg); color: var(--se-selection-fg); } ::-moz-selection { background: var(--se-selection-bg); color: var(--se-selection-fg); } @media (prefers-reduced-motion: reduce) { html, body, * { transition: none !important; } }