/* ================================================================ LEO · DESIGN TOKENS — "broadcast console" system ---------------------------------------------------------------- Single source of truth. Component CSS references these tokens; no raw hex/rgba below the token layer. Palette policy: hues are FIXED (inherited from the original UI). Every color here is one of those hues, a tint/shade of one, an alpha variant, or a true neutral. No new hues. Chart series note: the categorical order was validated with the dataviz six-check validator on surface #222e38 — CVD ΔE 18.5, normal-vision ΔE 30.8, contrast ≥ 3:1, chroma ≥ 0.10 all PASS. Series lightness sits deliberately above the generic dark-mode band: bright traces on a dark chassis are the point of the console idiom (validated identity checks make this safe). ================================================================ */ :root { /* ── Chassis (background ladder, deep → raised) ─────────────── */ --bg-0: #1a232b; /* page floor / header (shade of bg hue) */ --bg-1: #222e38; /* original --bg */ --bg-2: #2b3947; /* intermediate step (derived) */ --bg-3: #384959; /* original --surface */ --bg-4: #445c70; /* original --surface-2 */ /* ── Ink ───────────────────────────────────────────────────────── Contrast verified against every surface it is used on: ink 12.2 (bg-1) … 6.2 (bg-4) AA/AAA ink-mut 5.7 (bg-1) … 4.9 (bg-2) AA — not used on bg-4 ink-dim 4.9 (bg-2) AA for the mono micro-labels (See the contrast note at the foot of this file.) */ --ink: #e8f2fc; --ink-mut: #8aabbd; --ink-dim: #8aabbd; /* was .55 alpha → 2.87, FAILED */ --ink-on-accent: #1a232b; /* 8.04 on accent — AAA */ /* ── Signal hues ────────────────────────────────────────────── */ --accent: #88BDF2; /* cornflower phosphor */ --accent-2: #6A89A7; /* steel */ --ok: #1de9a1; --warn: #ffb300; --err: #ff5252; /* marks/edges only */ --err-ink: #ff8080; /* err as TEXT: 4.9 on bg-2 */ /* ── Alpha families (zones, fills, hairlines) ───────────────── */ --accent-a05: rgba(136, 189, 242, 0.05); --accent-a10: rgba(136, 189, 242, 0.10); --accent-a15: rgba(136, 189, 242, 0.15); --accent-a25: rgba(136, 189, 242, 0.25); --ok-a10: rgba(29, 233, 161, 0.10); --ok-a20: rgba(29, 233, 161, 0.20); --warn-a10: rgba(255, 179, 0, 0.10); --warn-a20: rgba(255, 179, 0, 0.20); --err-a10: rgba(255, 82, 82, 0.10); --err-a20: rgba(255, 82, 82, 0.20); /* ── Rules & hairlines ──────────────────────────────────────── */ --line-hair: rgba(136, 189, 242, 0.14); /* 1px structural hairline */ --line-faint: rgba(255, 255, 255, 0.05); /* sub-hairline (chart grid) */ --line-strong: rgba(136, 189, 242, 0.35); /* emphasized rule */ /* ── Chart series (fixed categorical order — never cycled) ──── */ --series-1: #81bdf9; /* accent, chroma-corrected */ --series-2: #ec407a; --series-3: #ffd740; --series-4: #bc66cb; /* purple, contrast-corrected */ --series-5: #66bb6a; --series-other:#546e7a; /* overflow folds here */ /* ── Type ───────────────────────────────────────────────────── */ --font-ui: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; --fs-3xs: 0.62rem; /* meter labels, footer */ --fs-2xs: 0.68rem; /* channel-strip labels */ --fs-xs: 0.75rem; /* chart desc, metadata */ --fs-sm: 0.82rem; /* dense body, transcript */ --fs-md: 0.9rem; /* rail items, buttons */ --fs-base: 0.95rem; /* narrative body */ --fs-lg: 1.1rem; /* card titles */ --fs-xl: 1.45rem; /* readout values */ --fs-2xl: 1.9rem; /* section display */ --track-caps: 0.08em; /* tracked caps (grotesk) */ --track-mono: 0.14em; /* tracked mono micro-labels */ --lh-tight: 1.15; --lh-body: 1.65; --measure: 65ch; /* narrative text measure */ /* ── Space (4px base) ───────────────────────────────────────── */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; /* ── Edges ──────────────────────────────────────────────────── */ --r-0: 0; --r-1: 2px; /* the console radius */ --r-2: 3px; --edge: 2px; /* zone edge-bar thickness */ /* ── Motion ─────────────────────────────────────────────────── */ --t-fast: 120ms; --t-med: 180ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* ── Layout ─────────────────────────────────────────────────── */ --rail-w: 200px; /* results tab rail */ --wrap-max: 1320px; /* ── Legacy aliases (transition layer — old component CSS keeps working while sections are migrated) ────────────── */ --bg: var(--bg-1); --surface: var(--bg-3); --surface-2: var(--bg-4); --border: var(--line-hair); --accent-glow: var(--accent-a25); --text: var(--ink); --text-muted: var(--ink-mut); --success: var(--ok); --warning: var(--warn); --danger: var(--err); --radius: var(--r-2); --radius-sm: var(--r-1); --shadow: none; --transition: var(--t-med) var(--ease); } /* ── Signature motif: the level meter ────────────────────────── Segmented tick scale, used in exactly four places: 1. analysis progress bar 2. per-tab building states 3. section title rules 4. empty/flatline states */ .meter-track { position: relative; height: 10px; background: var(--bg-0); border: 1px solid var(--line-hair); border-radius: var(--r-1); overflow: hidden; } .meter-track::after { /* etched segment ticks */ content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, transparent 0 6px, var(--bg-1) 6px 8px ); pointer-events: none; } .meter-fill { height: 100%; background: var(--accent); transition: width var(--t-med) var(--ease); } @keyframes meter-scan { 0% { width: 12%; opacity: 0.55; } 50% { width: 88%; opacity: 1; } 100% { width: 12%; opacity: 0.55; } } .tick-rule { /* section-marker rule */ height: 5px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 12px), linear-gradient(var(--line-hair), var(--line-hair)) 0 100% / 100% 1px no-repeat; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }