/* =========================================================================== tokens.css — the single design system for this service. Loaded by BOTH public/portal.html (/) and public/index.html (/ops) so the two surfaces stop reading as different products. Light and dark are separately selected, not inverted: the dark series colours are re-stepped for the dark surface rather than flipped. Series colours are validated for colour-vision deficiency separation, lightness band, chroma floor and contrast against both surfaces. Do not substitute a hue here without re-validating the set. Theme is set by `data-theme` on . The ops dashboard also honours `body.dark-mode` for backwards compatibility with its existing toggle. =========================================================================== */ :root, [data-theme='light'] { /* surfaces */ --page: #f4f4f1; --surface: #fcfcfb; --surface-2: #f3f2ef; --surface-3: #eceae5; --border: #e4e3dd; --border-strong: #d3d2ca; --grid: #e6e5df; /* ink */ --ink: #0b0b0b; --ink-2: #52514e; --ink-3: #8b8983; /* series (categorical, validated set) */ --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s1-soft: #e6effb; --s2-soft: #fdeee7; --s3-soft: #e4f5ee; /* status — reserved, never reused as a series colour */ --good: #0ca30c; --warn: #fab219; --serious: #ec835a; --crit: #d03b3b; --good-ink: #006300; --warn-ink: #8a5a00; --crit-ink: #a52222; --good-soft: #e3f4e3; --warn-soft: #fdf2da; --crit-soft: #fae6e6; --focus: #2a78d6; --accent: var(--s1); /* geometry */ --r-sm: 6px; --r-md: 8px; --r-lg: 11px; --row-h: 38px; --sidebar-w: 236px; /* depth: hairline borders do the work; shadow is for true overlays only */ --shadow-pop: 0 0 0 1px rgba(11, 11, 11, .07), 0 6px 20px -6px rgba(11, 11, 11, .16); --font: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; color-scheme: light; } [data-theme='dark'] { --page: #0d0d0d; --surface: #1a1a19; --surface-2: #232322; --surface-3: #2b2b29; --border: #2c2c2a; --border-strong: #3a3a37; --grid: #262625; --ink: #f2f2ef; --ink-2: #c3c2b7; --ink-3: #8b8983; --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s1-soft: #16283f; --s2-soft: #33201a; --s3-soft: #142b24; --good: #0ca30c; --warn: #fab219; --serious: #ec835a; --crit: #d03b3b; --good-ink: #3fc23f; --warn-ink: #fab219; --crit-ink: #f07070; --good-soft: #142b16; --warn-soft: #332a12; --crit-soft: #331a1a; --focus: #3987e5; --shadow-pop: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px -6px rgba(0, 0, 0, .6); color-scheme: dark; } [data-density='compact'] { --row-h: 31px; } /* --------------------------------------------------------------------------- Compatibility shims. The ops dashboard (public/index.html) was written against its own variable names. Rather than rewrite ~8,000 lines of markup, its names are remapped onto the tokens above. No JavaScript in that file changes. --------------------------------------------------------------------------- */ :root { --bg: var(--page); --side: var(--surface); --panel: var(--surface); --panel-2: var(--surface-2); --border2: var(--border-strong); --text: var(--ink); --text2: var(--ink-2); --text3: var(--ink-3); --dim: var(--ink-2); --faint: var(--ink-3); --surface2: var(--surface-2); --accent2: var(--s1); --accent-soft: var(--s1-soft); --accent-line: var(--border-strong); --green: var(--good); --green-soft: var(--good-soft); --amber: var(--warn-ink); --amber-soft: var(--warn-soft); --rose: var(--crit); --rose-soft: var(--crit-soft); --red: var(--crit); --yellow: var(--warn); --orange: var(--s2); --purple: #4a3aa7; --teal: var(--s3); --mint: var(--good-soft); --header-bg: var(--surface); --header-text: var(--ink); --radius: var(--r-lg); --radius-sm: var(--r-sm); --font: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; --shadow: 0 0 0 1px var(--border); --shadow-sm: 0 0 0 1px var(--border); --shadow-md: var(--shadow-pop); --rock-color: var(--s3); --ids-color: var(--s2); --refi-color: var(--good); --wins-color: #4a3aa7; } /* The ops dashboard toggles dark with a body class; when the portal iframes it, the head script sets html.embed-dark instead. Both map onto the same tokens. */ body.dark-mode, html.embed-dark body { --page: #0d0d0d; --surface: #1a1a19; --surface-2: #232322; --surface-3: #2b2b29; --border: #2c2c2a; --border-strong: #3a3a37; --grid: #262625; --ink: #f2f2ef; --ink-2: #c3c2b7; --ink-3: #8b8983; --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s1-soft: #16283f; --good-ink: #3fc23f; --crit-ink: #f07070; --good-soft: #142b16; --warn-soft: #332a12; --crit-soft: #331a1a; --shadow-pop: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px -6px rgba(0, 0, 0, .6); color-scheme: dark; --bg: var(--page); --surface2: var(--surface-2); --panel: var(--surface); --panel-2: var(--surface-2); --border2: var(--border-strong); --text: var(--ink); --text2: var(--ink-2); --text3: var(--ink-3); --dim: var(--ink-2); --faint: var(--ink-3); --header-bg: var(--surface); --header-text: var(--ink); --accent: var(--s1); --accent2: var(--s1); --green: var(--good); --mint: var(--good-soft); --red: var(--crit); --rose: var(--crit); --yellow: var(--warn); --orange: var(--s2); --teal: var(--s3); --shadow: 0 0 0 1px var(--border); --shadow-sm: 0 0 0 1px var(--border); --shadow-md: var(--shadow-pop); } /* --purple gets a lighter step on dark surfaces (the compat-shim value #4a3aa7 is too dark to read on the dark palette). Covers portal (data-theme) + ops embed/standalone. */ [data-theme='dark'], body.dark-mode, html.embed-dark body { --purple: #8b7cf0; } /* -------------------------------------------------------------------------- Primitives shared by both surfaces. -------------------------------------------------------------------------- */ .num { font-variant-numeric: tabular-nums; } /* "not reported" vs "not applicable" vs a measured zero are three different claims and must never render identically. */ .nil { color: var(--ink-3); } .na { color: var(--ink-3); font-size: 11px; } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 1.5px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; } .badge.crit { background: var(--crit-soft); color: var(--crit-ink); border-color: color-mix(in srgb, var(--crit) 30%, transparent); } .badge.warn { background: var(--warn-soft); color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 40%, transparent); } .badge.good { background: var(--good-soft); color: var(--good-ink); border-color: color-mix(in srgb, var(--good) 28%, transparent); } .badge.info { background: var(--s1-soft); color: var(--s1); border-color: color-mix(in srgb, var(--s1) 25%, transparent); } .badge.mute { background: var(--surface-2); color: var(--ink-3); border-color: var(--border); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }