/* ════════════════════════════════════════════════════════════════════════════ supernova-09 · Stage 9 DESIGN · css/tokens.css project : supernova.build — Terminal Observatory (approved variant v2, mock-v2-controlroom.html, human gate passed) role : THE ONLY file in the system that carries raw values. css/layout.css, css/components.css, css/motion.css reference var(--*) exclusively. Never add a raw hex/px/rem/duration here downstream — add the token here first, then consume it. value provenance (documented per declaration): [dir] design-direction.json — canonical source of truth (4B-approved) [mock] mocks/mock-v2-controlroom.html — approved render values [cert] scripts/check_contrast.py certification (dark/light pairings) [drv] derived — same hue family, adjusted to clear WCAG AA where the approved render fell short of the stated high-contrast deal-breaker theme model: dark is the default (:root). Light is served when the OS asks (@media prefers-color-scheme) or when the document opts in via — both paths share one token set, so a manual toggle and the media query can never drift apart. ════════════════════════════════════════════════════════════════════════════ */ /* ── 1 · theme switch ──────────────────────────────────────────────────────── */ :root{ color-scheme:dark; } /* ── 2 · palette — dark (default) ──────────────────────────────────────────── */ :root{ /* surfaces — the observatory deck */ --bg:#0B0D0C; /* [dir] deck / canvas base */ --panel:#10130F; /* [dir][mock] window face */ --panel-2:#151A14; /* [mock] window title-head face */ /* lines */ --line:#232B25; /* [dir] hairline rule */ --line-2:#39463B; /* [mock] window outline (border) */ /* ink ladder (light → dark usage) */ --ink-hi:#F6FBF7; /* [mock] headline / emphasis (~17:1 on --bg) */ --ink:#DCE8DE; /* [dir][mock] body text */ --ink-dim:#73857A; /* [drv] secondary text & captions (4.98:1 AA; render family #6B7C70 = 4.40:1 → lifted) */ --ink-faint:#657763; /* [mock dim2] decorative meta / chart axes only */ /* accents — exactly two, per best_of.md + dir palette rule */ --green:#33FF66; /* [dir][mock] telemetry / status / ok */ --green-dim:#1E7A43; /* [mock] deep-green fills (ASCII shade out) */ --rose:#FF5C8A; /* [dir][mock] flares / headline accent / CTA */ --rose-dim:#C23C64; /* [mock] rose hairline accents (pill, target) */ --rose-soft:#F5A7BC; /* [mock] pale rose (ASCII ember highlights) */ /* textures + selection */ --star:#23352A; /* [mock] starfield pinprick on the deck */ --sel-bg:var(--rose); /* [mock] ::selection */ --sel-ink:#1A0710; /* [mock] ::selection text on rose */ } /* ── 3 · palette — light (paper-printer: same grammar struck as paper) ────── */ :root[data-theme="light"]{ color-scheme:light; --bg:#F4F0E4; --panel:#FBF7EA; --panel-2:#EFE8D2; --line:#D8D2C0; --line-2:#BEB59B; --ink-hi:#000000; --ink:#1A1712; --ink-dim:#57503F; --ink-faint:#75694F; --green:#0E7A36; --green-dim:#2E8F4F; --rose:#C63A63; --rose-dim:#A12D52; --rose-soft:#7E6A58; --star:#D8D2C0; --sel-bg:var(--rose); --sel-ink:#FFFFFF; } /* ── 4 · typography ───────────────────────────────────────────────────────── */ :root{ /* families — IBM Plex Mono ships on every page at build (Stage 10) */ --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; --font-ui:var(--font-mono); /* whole system is monospace-native */ --fw-regular:400; --fw-medium:500; --fw-semibold:600; /* fixed sizes (px, mono metrics) — mock ladder 10.5 → 15 */ --fs-10:10.5px; /* [mock] telemetry labels */ --fs-11:11.5px; /* [mock] captions / small comments */ --fs-12:12.5px; /* [mock] chrome · window heads · pre */ --fs-13:13px; /* [mock] lists · tables · window body */ --fs-14:14px; /* [mock] body default */ --fs-15:15px; /* [mock] section heading row */ /* fluid sizes */ --fs-stamp:min(clamp(8px,1.1vw,14px), calc((100vw - var(--sp-16) * 2) / 48.2)); /* [mock] figlet masthead — the 48.2 divisor is the figlet line width in em; min() makes the stamp shrink to fit narrow phones instead of overflowing its container (which dragged sibling cards off-screen at ≤385px viewports) */ --fs-glitch:clamp(30px,4.9vw,58px); /* [mock] lead glitch headline */ --fs-scene:clamp(7px,0.85vw,11px); /* [mock] observatory ASCII */ --fs-chart:clamp(6.5px,0.8vw,10.5px); /* [mock] block charts */ --fs-cta:clamp(15px,1.8vw,19px); /* [mock] CTA command line */ --fs-tick:clamp(15px,1.8vw,21px); /* [mock] telemetry values */ --fs-hero-cmd:clamp(14px,1.6vw,17px); /* [mock] hero command row */ /* line heights */ --lh-body:1.66; /* [mock] body */ --lh-head:1.12; /* [mock] glitch headline */ --lh-stamp:1.24; /* [mock] figlet masthead */ --lh-scene:1.08; /* [mock] observatory ASCII art */ --lh-pre:1.7; /* [mock] code surfaces (pre.c) */ --lh-chart:1.3; /* [mock] charts */ --lh-tick:1.3; /* [mock] telemetry values */ --lh-faq:1.8; /* [mock] faq answer copy */ --lh-tight:1.3; /* letter-spacing */ --ls-none:0; --ls-label:.04em; /* [mock] table heads */ --ls-kicker:.06em; /* [mock] telemetry labels */ --ls-head:.02em; /* [mock] section heading rows */ --ls-glitch:-.013em; /* [mock] glitch headline */ } /* ── 5 · spacing scale ────────────────────────────────────────────────────── */ :root{ --sp-2:2px; --sp-4:4px; --sp-5:5px; --sp-6:6px; --sp-7:7px; --sp-8:8px; --sp-10:10px; --sp-11:11px; --sp-12:12px; --sp-13:13px; --sp-14:14px; --sp-16:16px; --sp-18:18px; --sp-20:20px; --sp-22:22px; --sp-24:24px; --sp-26:26px; --sp-32:32px; --sp-40:40px; --sp-46:46px; --sp-56:56px; --sp-70:70px; /* section rhythm — mapped by .rhythm-* classes in layout.css */ --rhythm-compressed:var(--sp-16); --rhythm-standard:var(--sp-24); /* [mock] .mt between sections */ --rhythm-generous:var(--sp-46); /* [mock] major act break / footer */ --rhythm-very-generous:var(--sp-70);/* [mock] zone bottom breathing room */ /* shared surface paddings */ --pad-window-bd:var(--sp-16) var(--sp-18); /* [mock] .win .bd */ --pad-window-bd-wide:var(--sp-24) var(--sp-26) var(--sp-22); /* claim win */ --pad-window-head:var(--sp-7) var(--sp-13); /* [mock] .win .hd */ --pad-tick-cell:var(--sp-10) var(--sp-14); /* [mock] ticker cells */ } /* ── 6 · content widths & deck gutters ────────────────────────────────────── */ :root{ --content-max:1520px; /* [mock] .zone max-width */ --content-lead:860px; /* [mock] .sec-lead max-width */ --content-narrow:720px; /* compressed prose lane */ --gutter-deck:3.2%; /* [mock] chrome inline padding */ --gutter-zone:2.6%; /* [mock] .zone inline padding */ } /* ── 7 · spatial grid ratios (the control-room “lays” grammar) ────────────── */ :root{ --grid-1:1fr; /* [mock] .a12 */ --grid-split:1fr 1fr; /* equal halves (.section-split) */ --grid-7:1.25fr .75fr; /* [mock] .a7 — evidence + rail */ --grid-5:.8fr 1.2fr; /* [mock] .a5 — receipts sidecar */ --grid-8:1.1fr .9fr; /* [mock] .a8 — chart + stack */ --grid-trio:repeat(3,1fr); --grid-four:repeat(4,1fr); /* [mock] .four */ --grid-five:repeat(5,1fr); /* [mock] pipeline run row */ --grid-gap:var(--sp-20); /* [mock] .lays gap */ --stack-gap:var(--sp-20); /* stacked pane gap inside columns */ } /* ── 8 · shape ────────────────────────────────────────────────────────────── */ :root{ --hairline:1px; /* rule / separator stroke width */ --radius-window:3px; /* [mock] .win */ --radius-pill:2px; /* [mock] .pill CTA */ --corner-size:9px; /* [mock] corner frame arm length */ --corner-thick:2px; /* [mock] corner frame stroke */ --border-hair:1px solid var(--line); /* rules & separators */ --border-window:1px solid var(--line-2); /* .win outline */ } /* ── 9 · elevation & glow ─────────────────────────────────────────────────── */ :root{ --shadow-window:0 14px 34px rgba(0,0,0,.38); /* [mock] window drop */ --shadow-window-soft:0 6px 18px rgba(0,0,0,.22); /* hover lift */ --glow-rose:0 0 6px var(--rose); /* [mock] LED + cursor bloom */ --glow-green:0 0 5px var(--green); /* [mock] status dot bloom */ --pill-glow-spread:color-mix(in srgb,var(--rose) 0%,transparent); /* pulse base */ --pill-glow-edge:color-mix(in srgb,var(--rose) 34%,transparent); /* pulse peak */ } :root[data-theme="light"]{ --shadow-window:0 14px 34px rgba(64,53,30,.14); --shadow-window-soft:0 6px 16px rgba(64,53,30,.10); } :root[data-theme="light"]{ --shadow-window:0 14px 34px rgba(64,53,30,.14); --shadow-window-soft:0 6px 16px rgba(64,53,30,.10); } /* ── 10 · surface effects (full values live here — layout only consumes) ──── */ :root{ /* starfield deck — multi-point radial pinpricks (values tuned per theme) */ --fx-starfield: radial-gradient(1.2px 1.2px at 12% 22%,var(--star) 50%,transparent 52%), radial-gradient(1px 1px at 34% 9%,var(--star) 50%,transparent 52%), radial-gradient(1.4px 1.4px at 51% 31%,var(--star) 50%,transparent 52%), radial-gradient(1px 1px at 71% 14%,var(--star) 50%,transparent 52%), radial-gradient(1.2px 1.2px at 86% 27%,var(--star) 50%,transparent 52%), radial-gradient(1px 1px at 23% 47%,var(--star) 50%,transparent 52%), radial-gradient(1.3px 1.3px at 64% 55%,var(--star) 50%,transparent 52%), radial-gradient(1px 1px at 92% 49%,var(--star) 50%,transparent 52%), radial-gradient(1.1px 1.1px at 8% 68%,var(--star) 50%,transparent 52%), radial-gradient(1.2px 1.2px at 45% 78%,var(--star) 50%,transparent 52%), radial-gradient(1px 1px at 77% 84%,var(--star) 50%,transparent 52%); /* CRT veil (dark only — hidden in light via layout.css) */ --fx-crt-veil:repeating-linear-gradient(0deg, rgba(231,240,233,.018) 0 1px, transparent 1px 3px); /* figlet masthead fill — green→rose sunburst degrade, radiating from center (dir typography). Stops keep a narrow blend band: wide green→rose interpolation passes through khaki, which reads as "washed out" on small/phone panels (only the very ends hit pure rose). */ --figlet-fill:radial-gradient(ellipse 70% 240% at 50% 50%,var(--green) 0 42%,var(--rose) 58%); --figlet-1:#FF5B7F; /* sunburst band 1/39 — painted via color, not background */ --figlet-2:#FF5967; /* sunburst band 2/39 — painted via color, not background */ --figlet-3:#FF5E57; /* sunburst band 3/39 — painted via color, not background */ --figlet-4:#FF7255; /* sunburst band 4/39 — painted via color, not background */ --figlet-5:#FF8753; /* sunburst band 5/39 — painted via color, not background */ --figlet-6:#FF9C50; /* sunburst band 6/39 — painted via color, not background */ --figlet-7:#FFB24E; /* sunburst band 7/39 — painted via color, not background */ --figlet-8:#FFC84C; /* sunburst band 8/39 — painted via color, not background */ --figlet-9:#FFDF4A; /* sunburst band 9/39 — painted via color, not background */ --figlet-10:#FFF648; /* sunburst band 10/39 — painted via color, not background */ --figlet-11:#F0FF46; /* sunburst band 11/39 — painted via color, not background */ --figlet-12:#D7FF44; /* sunburst band 12/39 — painted via color, not background */ --figlet-13:#BEFF42; /* sunburst band 13/39 — painted via color, not background */ --figlet-14:#A5FF40; /* sunburst band 14/39 — painted via color, not background */ --figlet-15:#8BFF3E; /* sunburst band 15/39 — painted via color, not background */ --figlet-16:#70FF3B; /* sunburst band 16/39 — painted via color, not background */ --figlet-17:#55FF39; /* sunburst band 17/39 — painted via color, not background */ --figlet-18:#39FF37; /* sunburst band 18/39 — painted via color, not background */ --figlet-19:#35FF4D; /* sunburst band 19/39 — painted via color, not background */ --figlet-20:#33FF66; /* sunburst band 20/39 — painted via color, not background */ --figlet-21:#35FF4D; /* sunburst band 21/39 — painted via color, not background */ --figlet-22:#39FF37; /* sunburst band 22/39 — painted via color, not background */ --figlet-23:#55FF39; /* sunburst band 23/39 — painted via color, not background */ --figlet-24:#70FF3B; /* sunburst band 24/39 — painted via color, not background */ --figlet-25:#8BFF3E; /* sunburst band 25/39 — painted via color, not background */ --figlet-26:#A5FF40; /* sunburst band 26/39 — painted via color, not background */ --figlet-27:#BEFF42; /* sunburst band 27/39 — painted via color, not background */ --figlet-28:#D7FF44; /* sunburst band 28/39 — painted via color, not background */ --figlet-29:#F0FF46; /* sunburst band 29/39 — painted via color, not background */ --figlet-30:#FFF648; /* sunburst band 30/39 — painted via color, not background */ --figlet-31:#FFDF4A; /* sunburst band 31/39 — painted via color, not background */ --figlet-32:#FFC84C; /* sunburst band 32/39 — painted via color, not background */ --figlet-33:#FFB24E; /* sunburst band 33/39 — painted via color, not background */ --figlet-34:#FF9C50; /* sunburst band 34/39 — painted via color, not background */ --figlet-35:#FF8753; /* sunburst band 35/39 — painted via color, not background */ --figlet-36:#FF7255; /* sunburst band 36/39 — painted via color, not background */ --figlet-37:#FF5E57; /* sunburst band 37/39 — painted via color, not background */ --figlet-38:#FF5967; /* sunburst band 38/39 — painted via color, not background */ --figlet-39:#FF5B7F; /* sunburst band 39/39 — painted via color, not background */ /* progress-bar fill — rose→green horizontal telemetry sweep */ --bar-fill:linear-gradient(90deg,var(--rose),var(--green)); } /* ── 11 · ASCII art sub-palettes (raw pixels of the approved figures) ──────── The observatory scene and the block charts are character-mapped art whose per-glyph colors were hand-tuned per theme in the approved mock. They are design values, so they live here; components.css only maps class→token. ──────────────────────────────────────────────────────────────────────────── */ :root{ /* observatory scene (dark plate) */ --art-star:#6B7C70; --art-star-hi:#F6FBF7; --art-tgt:var(--rose); --art-bm-out:var(--green-dim); --art-bm-in:var(--green); --art-bm-spk:#F6FBF7; --art-tube-hi:#F6FBF7; --art-tube:#7CE89C; --art-tube-dim:var(--green-dim); --art-dome:var(--green-dim); --art-dome-hi:var(--rose); --art-slit:var(--bg); --art-haze:#657763; --art-emb-c:var(--rose); --art-emb-m:var(--rose-dim); --art-emb-h:var(--rose-soft); --art-rg:var(--ink-dim); --art-rg-edge:var(--ink); /* block charts (dark) */ --chart-fill:var(--green-dim); --chart-edge:var(--green); --chart-fill2:var(--rose-dim); --chart-edge2:var(--rose); --chart-axis:#657763; --chart-grid:#657763; --chart-lab:#F6FBF7; --chart-lab-dim:#6B7C70; --chart-lab-amb:var(--rose); --chart-year:#657763; } :root[data-theme="light"]{ --art-star:#8B8572; --art-star-hi:#3A362C; --art-tgt:var(--rose); --art-bm-out:#A8C0AB; --art-bm-in:var(--green); --art-bm-spk:#1A1712; --art-tube-hi:#1A1712; --art-tube:var(--green); --art-tube-dim:#9CB39E; --art-dome:#7FA98A; --art-dome-hi:var(--rose); --art-slit:var(--panel); --art-haze:#D8D2C0; --art-emb-c:var(--rose); --art-emb-m:var(--rose-dim); --art-emb-h:#D9A7B8; --art-rg:#A69C84; --art-rg-edge:#57503F; --chart-fill:#BFD6C0; --chart-edge:var(--green); --chart-fill2:#E2BCC8; --chart-edge2:var(--rose); --chart-axis:#A69C84; --chart-grid:#A69C84; --chart-lab:#1A1712; --chart-lab-dim:#6B7C70; --chart-lab-amb:var(--rose); --chart-year:#A69C84; } :root[data-theme="light"]{ --art-star:#8B8572; --art-star-hi:#3A362C; --art-tgt:var(--rose); --art-bm-out:#A8C0AB; --art-bm-in:var(--green); --art-bm-spk:#1A1712; --art-tube-hi:#1A1712; --art-tube:var(--green); --art-tube-dim:#9CB39E; --art-dome:#7FA98A; --art-dome-hi:var(--rose); --art-slit:var(--panel); --art-haze:#D8D2C0; --art-emb-c:var(--rose); --art-emb-m:var(--rose-dim); --art-emb-h:#D9A7B8; --art-rg:#A69C84; --art-rg-edge:#57503F; --chart-fill:#BFD6C0; --chart-edge:var(--green); --chart-fill2:#E2BCC8; --chart-edge2:var(--rose); --chart-axis:#A69C84; --chart-grid:#A69C84; --chart-lab:#1A1712; --chart-lab-dim:#6B7C70; --chart-lab-amb:var(--rose); --chart-year:#A69C84; } /* ── 12 · glitch chromatic-split shadows (theme-attenuated) ───────────────── */ :root{ --glitch-sh-g:1.4px 0 rgba(51,255,102,.35); /* [mock] green ghost */ --glitch-sh-r:1.6px 0 rgba(255,92,138,.5); /* [mock] rose ghost */ } :root[data-theme="light"]{ --glitch-sh-g:1.4px 0 rgba(14,122,54,.25); --glitch-sh-r:1.6px 0 rgba(198,58,99,.32); } :root[data-theme="light"]{ --glitch-sh-g:1.4px 0 rgba(14,122,54,.25); --glitch-sh-r:1.6px 0 rgba(198,58,99,.32); } /* ── 13 · motion tokens (durations, easing) ───────────────────────────────── */ :root{ /* easing — no raw ease keyword anywhere in the system (Ban #10) */ --ease-default:cubic-bezier(.22,.61,.36,1); /* enter / exit, UI */ --ease-smooth:cubic-bezier(.65,0,.35,1); /* on-screen movement */ --ease-snap:steps(1,end); /* hard CRT state flips */ --dur-blink:1s; /* [mock] live ▋ blink */ --dur-cursor:1.06s; /* [mock] prompt cursor block */ --dur-pulse:2.6s; /* [mock] CTA pill halo */ --dur-grow:2.2s; /* [mock] telemetry bar draw */ --dur-glitch:7s; /* [dir] lead glitch burst cycle */ --dur-chrome:.28s; /* [mock] chrome hide / reveal */ --dur-micro:.2s; /* micro-interactions */ --dur-reveal:.6s; /* scroll reveals */ --stagger-step:70ms; /* reveal stagger increment (data-i ladder) */ } /* ── 14 · z-index ladder ──────────────────────────────────────────────────── */ :root{ --z-deck:0; --z-content:2; --z-chrome:70; --z-veil:80; } /* ── 15 · focus / interaction base ────────────────────────────────────────── */ :root{ --focus-ring:2px solid var(--rose); /* [mock] :focus-visible */ --focus-offset:2px; }