/* zpersona — design tokens (single source of truth) * Authoritative copy lives in mainframe/design/tokens.css; the * marketing site mirrors it so brand updates flow from one place. * * Modes: add `class="mode-studio"` (default) or `class="mode-console"` * to or . * * Marketing pages always render in mode-studio. The operator console * is the only surface that supports mode-console. */ :root { /* ─── Type ramps ───────────────────────────────────────────────── */ --t-display: "Instrument Serif", ui-serif, Georgia, serif; --t-sans: "Onest", ui-sans-serif, system-ui, -apple-system, sans-serif; --t-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --t-crt: "VT323", "JetBrains Mono", ui-monospace, monospace; /* ─── Spacing scale (4-base) ──────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px; /* ─── Radius ──────────────────────────────────────────────────── */ --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-4: 12px; --r-5: 16px; /* ─── Motion ──────────────────────────────────────────────────── */ --ease-emph: cubic-bezier(.2,.7,.1,1); --ease-std: cubic-bezier(.4,0,.2,1); --d-fast: 120ms; --d-med: 240ms; --d-slow: 480ms; --d-breath: 5200ms; --d-pulse: 1800ms; /* ─── Brand anchors (mode-independent) ────────────────────────── */ --brand-signal: oklch(.80 .13 195); --brand-signal-dim: oklch(.55 .09 195); --brand-signal-soft: oklch(.80 .13 195 / .14); /* Lifecycle chip taxonomy */ --chip-live-fg: var(--brand-signal); --chip-live-bg: oklch(.32 .06 195 / .35); --chip-live-bd: oklch(.50 .08 195 / .55); --chip-mock-fg: oklch(.78 .08 290); --chip-mock-bg: oklch(.30 .04 290 / .35); --chip-mock-bd: oklch(.55 .08 290 / .55); --chip-bench-fg: oklch(.74 .07 250); --chip-bench-bg: oklch(.30 .03 250 / .35); --chip-bench-bd: oklch(.55 .07 250 / .55); } /* ─── Studio — modern dark-ops (default for marketing) ─────────── */ .mode-studio, :root { --bg-0: oklch(.14 .005 240); --bg-1: oklch(.17 .006 240); --bg-2: oklch(.20 .007 240); --bg-3: oklch(.24 .008 240); --line: oklch(.30 .008 240); --line-soft: oklch(.24 .006 240); --fg-1: oklch(.96 .005 240); --fg-2: oklch(.78 .005 240); --fg-3: oklch(.58 .005 240); --fg-4: oklch(.42 .005 240); --health-ok: oklch(.74 .14 155); --health-deg: oklch(.80 .14 72); --health-down: oklch(.66 .20 25); --signal: var(--brand-signal); --citation: oklch(.82 .10 230); --font-ui: var(--t-sans); --font-data: var(--t-mono); --font-display: var(--t-display); } /* ─── Console — CRT/3270 heritage skin (operator console only) ── */ .mode-console { --bg-0: #050a06; --bg-1: #07100a; --bg-2: #091611; --bg-3: #0c1d16; --line: #1a3a2a; --line-soft: #122218; --fg-1: #aff7c8; --fg-2: #6cd49a; --fg-3: #3da06d; --fg-4: #226a48; --health-ok: #8df0a7; --health-deg: #f4c969; --health-down: #ff7766; --signal: #8df0a7; --citation: #f4c969; --font-ui: var(--t-crt); --font-data: var(--t-crt); --font-display: var(--t-crt); } /* ─── Legacy variable aliases (consumed by zpersona-www style.css) * The existing marketing pages were authored against an older variable * vocabulary. We alias here so a single tokens.css edit re-skins both * layers without touching every page. * ────────────────────────────────────────────────────────────── */ :root { --bg: var(--bg-0); --bg-elev: var(--bg-1); --bg-card: var(--bg-2); --border: var(--line); --border-soft: var(--line-soft); --ink: var(--fg-1); --ink-muted: var(--fg-2); --ink-dim: var(--fg-3); --accent: var(--brand-signal); --accent-dim: var(--brand-signal-dim); --accent-soft: var(--brand-signal-soft); --font-sans: var(--t-sans); --font-serif: var(--t-display); --font-mono: var(--t-mono); }