/* ===================================================================== Hub dark-surface tokens — the vocabulary the authenticated Hub is built from. tokens.css is the brand palette (light-surface, marketing) and stays verbatim; the Hub is a dark UI and, until 2026-08-24, every component hand-typed its own rgba(255,255,255,x) values (708 literals across 205 files, 97 distinct). This file gives those values names so they can be reasoned about, and is the ONLY place a raw colour literal may appear in Hub code. Collapsed 2026-08-24 (styling review): visually-indistinguishable ladder steps now share one band value — the band's anchor token carries the literal, the other steps alias it so existing components keep resolving. The white ladder reads as three text levels plus a faint step, two grounds, and three border weights. Accent tints were kept, with only their long tail folded. Two layers: 1. LADDER tokens — the historical names components reference. 2. SEMANTIC aliases — the small set new code should reach for first. ===================================================================== */ :root { /* --------------------------------------------------------------- 1. LADDER — white text: three levels plus a faint step --------------------------------------------------------------- */ --white: #fff; /* headings, primary values */ --white-a90: var(--white); --white-a92: var(--white); --white-a75: rgba(255,255,255,0.75); /* body */ --white-a65: var(--white-a75); --white-a70: var(--white-a75); --white-a72: var(--white-a75); --white-a85: var(--white-a75); --white-a55: rgba(255,255,255,0.55); /* secondary, labels, meta */ --white-a45: var(--white-a55); --white-a50: var(--white-a55); --white-a60: var(--white-a55); --white-a35: rgba(255,255,255,0.35); /* faint: disabled, decorative glyphs */ --white-a30: var(--white-a35); --white-a32: var(--white-a35); /* White surfaces and borders — two grounds, three border weights */ --white-a04: rgba(255,255,255,0.04); /* ground */ --white-a02: var(--white-a04); --white-a03: var(--white-a04); --white-a05: var(--white-a04); --white-a06: rgba(255,255,255,0.06); /* raised or active ground, divider */ --white-a08: rgba(255,255,255,0.08); /* border: card edge */ --white-a12: rgba(255,255,255,0.12); /* border-strong: inputs, pills */ --white-a10: var(--white-a12); --white-a14: var(--white-a12); --white-a18: rgba(255,255,255,0.18); /* border-heavy: hover edges, tracks */ --white-a16: var(--white-a18); --white-a20: var(--white-a18); /* Black — wells, insets, shadows */ --black-a18: rgba(0,0,0,0.18); --black-a35: rgba(0,0,0,0.35); --black-a40: var(--black-a35); --black-a50: rgba(0,0,0,0.50); /* Cyan (brand accent) tints — wash, tint, border, strong */ --cyan-bright: #2bc4f9; --cyan-bright-a14: rgba(43,196,249,0.14); --cyan-a10: rgba(0,174,239,0.10); /* wash: selected / accent grounds */ --cyan-a06: var(--cyan-a10); --cyan-a12: var(--cyan-a10); --cyan-a14: rgba(0,174,239,0.14); /* tint: pills, chips */ --cyan-a16: var(--cyan-a14); --cyan-a30: rgba(0,174,239,0.30); /* border */ --cyan-a35: var(--cyan-a30); --cyan-a40: var(--cyan-a30); --cyan-a55: rgba(0,174,239,0.55); /* strong: focus rings, glows */ --cyan-a85: rgba(0,174,239,0.85); /* Danger — the editing surfaces' error/invalid pink. (Scoped CSS originally wrote var(--color-mulberry, #d2569b) assuming mulberry was this pink; mulberry is #391C46, which made every validation message unreadable — PR #164.) */ --color-danger: #d2569b; --danger-a06: rgba(210,86,155,0.06); --danger-a10: rgba(210,86,155,0.10); --danger-a12: rgba(210,86,155,0.12); --danger-a14: rgba(210,86,155,0.14); --danger-a35: rgba(210,86,155,0.35); --danger-a40: rgba(210,86,155,0.40); --danger-a50: rgba(210,86,155,0.50); /* Brand red tints + the tinted text used on red banners */ --red-a10: rgba(237,28,36,0.10); --red-a12: rgba(237,28,36,0.12); --red-a14: rgba(237,28,36,0.14); --red-a40: rgba(237,28,36,0.40); --red-a50: rgba(237,28,36,0.50); --red-tint: #ffb4b8; /* Status (resource / project health). These are NOT the brand pillar colours — the brand green/gold/red are darker and were never used for status. */ --status-ok: #6bcb77; --status-ok-a12: rgba(107,203,119,0.12); --status-ok-a15: rgba(107,203,119,0.15); --status-warn: #f7b940; --status-warn-a14: rgba(247,185,64,0.14); --status-error: #ed5a5a; /* Brand gold / green / purple tints */ --gold-bright: #ffb13a; /* top of the CTA button gradient */ --gold-a10: rgba(247,148,29,0.10); --gold-a14: rgba(247,148,29,0.14); --gold-a40: rgba(247,148,29,0.40); --green-a14: rgba(141,198,63,0.14); --purple-a18: rgba(146,39,143,0.18); --purple-a28: rgba(146,39,143,0.28); --purple-bright: #c977c7; /* Amber (runbook category / chips) */ --amber-a35: rgba(224,179,65,0.35); --amber-soft-a12: rgba(229,181,103,0.12); /* Dark surfaces */ --dk-elevated: #2a1f4f; /* menus, error bar, reconnect card */ --dk-nav-glass: rgba(26,21,64,0.72); /* sticky nav bar over the blurred page */ --dk-sheet-top: rgba(44,38,88,0.98); /* EditSheet gradient */ --dk-sheet-bottom: rgba(32,27,66,0.98); --dk-scrim: rgba(4,6,16,0.66); /* sheet backdrop */ --dk-scrim-light: rgba(4,6,16,0.30); /* help backdrop: the page it explains stays readable */ --dk-scrim-strong: rgba(4,6,16,0.72); /* reconnect backdrop */ --dk-well-1: #0c1018; /* native