/* ========================================================================== Brain-Stem design tokens Single source of truth for the component library. Values come from wiki/brand/04-visual-identity.md — change them there and here together. ========================================================================== */ :root{ /* ---- Type ------------------------------------------------------------ */ --font-sans:"Segoe UI", system-ui, -apple-system, "Selawik", "Inter", sans-serif; --font-mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace; /* mono TBC */ /* Weights — Segoe UI ships no Medium (500); hierarchy is 400/600/700 */ --fw-regular:400; --fw-semibold:600; --fw-bold:700; /* Type scale — Balanced ramp (×1.25, major third). Body 16px anchor. display-* are hero/marketing only; the rest is the core scale. */ --fs-display-l:54px; --lh-display-l:1.05; --fs-display-m:38px; --lh-display-m:1.08; --fs-h1:32px; --lh-h1:1.15; --fs-h2:25px; --lh-h2:1.2; --fs-h3:20px; --lh-h3:1.3; --fs-body:16px; --lh-body:1.6; --fs-body-sm:14px; --lh-body-sm:1.5; --fs-caption:13px; --lh-caption:1.4; --fs-eyebrow:13px; --lh-eyebrow:1.4; --fs-label:14px; --lh-label:1.2; --fs-mono:14px; --lh-mono:1.5; /* Letter-spacing — only where it earns it */ --tracking-display:-.01em; /* large headings tighten slightly */ --tracking-eyebrow:.09em; /* uppercase eyebrow opens up */ /* Icons — Lucide, 24-grid, 2px stroke. Inline , currentColor. */ --icon-sm:16px; /* inline in buttons, labels, dense UI */ --icon-md:20px; /* default standalone */ --icon-lg:24px; /* emphasis, empty states */ /* ---- Primary trio ---------------------------------------------------- */ --white:#F6F5F2; /* warm off-white canvas */ --surface:#FFFFFF; --green:#388E3C; /* deep green — the accent */ --ink:#212121; /* near-black — body + most headings */ /* ---- Green scale ----------------------------------------------------- */ --green-deep:#388E3C; --green-bright:#4CAF50; /* interactive / hover accents */ --green-light:#C8E6C9; /* subtle fills, pills */ --green-text:#2E7D32; /* green as small text on white (clears AA) */ /* ---- Front-end surfaces (client-facing) ------------------------------ */ --fe-canvas:#F6F5F2; --fe-surface:#FFFFFF; --fe-border:#E2E2E0; --fe-text:#212121; /* Secondary text. Darkened twice, both times for the same reason: the value has to clear AA (4.5:1) on the DARKEST surface it is asked to sit on, and each new tint deeper than the canvas moves that surface. #757575 -> #6E6E6E cleared the warm canvas (--fe-canvas, 4.68:1) #6E6E6E -> #696969 clears the board lane (--board-lane, 4.76:1) The lane is "one half-step deeper than the warm canvas" (see the board tokens below) and that half-step was the whole of #6E6E6E's 0.18 margin: .board__count measured 4.39:1 on it and failed. #696969 also clears --tag-fill #EAEAE6 (4.58:1), the deepest neutral tint in the set, so a third darkening should not be needed for a neutral surface. Anything DEEPER than --tag-fill needs its own ink, not another shift here. Measured 2026-07-27, JOB-AUS1-0001ll. */ --fe-text-2:#696969; /* ---- Back-end surfaces (operational) --------------------------------- */ --be-canvas:#EDF0F3; --be-surface:#FFFFFF; --be-border:#D8DEE6; --be-text:#212121; --be-text-2:#5A636B; /* ---- Status ---------------------------------------------------------- */ --status-success:#388E3C; --status-warning:#B8860B; --status-error:#C0392B; --status-info:#1565C0; --status-neutral:#546E7A; /* ---- Extended range (charts, diagrams) — green leads as series 1 ----- */ --data-1:#388E3C; --data-2:#1565C0; --data-3:#B8860B; --data-4:#6A1B9A; --data-5:#00838F; --data-6:#D84315; --data-7:#AD1457; --data-8:#5D4037; --data-9:#546E7A; /* ---- Derived interaction shades (not brand colours; UI only) --------- */ --green-hover:#256B29; /* primary button hover (deep green, darkened) */ --ink-hover:#3D3D3D; /* tertiary/black button hover */ --surface-hover:#F0EFEC; /* secondary button hover fill */ /* ---- Disabled / locked + form-state greys (UI only) ------------------ */ --disabled-ink:#9E9E9E; /* text/glyph on any disabled control */ --disabled-fill:#F4F4F2; /* disabled control fill */ --disabled-border:#D8D8D6; /* disabled radio/checkbox control border */ --error-ring:#E2A8A2; /* rest-state control border in an error group */ --row-hover:#F7F6F3; /* option/row hover wash (radio, checkbox) */ --pager-disabled:#BDBDBD; /* disabled pager/pagination button text — lighter than --disabled-ink, by design */ /* ---- Spacing — 4px base, 8px rhythm ---------------------------------- * 1–2 inside components · 3–5 laying components out · 6–9 page structure */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; /* ---- Layout ---------------------------------------------------------- * Max width for page content / full-bleed chrome on very wide (ultrawide) screens, so content doesn't stretch edge-to-edge. Use the .bs-container utility, or the max() side-padding pattern (see .topbar). */ --bs-content-max:1440px; /* ---- Page sections --------------------------------------------------- */ --net-idle:#DCE4DC; /* dimmed mark stroke (nodes + links) before a region lights — platform network */ /* ---- Radius ---------------------------------------------------------- */ --radius:4px; /* ---- Button tokens --------------------------------------------------- */ --btn-height:44px; /* min height — touch target */ --btn-min-width:132px; /* min width — keeps short labels even */ --btn-pad-x:20px; --btn-font-size:15px; --btn-font-weight:600; --btn-gap:8px; /* icon-to-label gap */ /* ---- Icon button tokens ---------------------------------------------- * Text-free button, a single glyph. Circular; sizes 40 / 32 / 28. Ghost (default), solid, danger, info. Inherits the button/status colours; only the info hover tint is its own. No disabled state by design. */ --ib-info-fill:#E7F1FB; /* faint blue fill behind the info (i) on hover */ /* ---- Text link tokens ------------------------------------------------ * Green-text underlined (the base is the .t-link type style). Navigation, not action. Visited links mute to grey; focus reuses the button ring. */ --link-visited:#757575; /* muted grey for a visited link (clears AA on white) */ /* ---- Form field tokens ----------------------------------------------- */ --field-height:40px; --field-height-compact:36px; /* compact inputs — search in toolbars / table headers / tight nav */ --field-pad-x:12px; --field-font-size:15px; --field-fill:#F0EFEC; /* soft grey at rest (= surface-hover) */ --field-placeholder:#6B6B6B; /* ≥4.5:1 on the fill — clears AA */ --field-error-fill:#FBEAE8; /* tinted fill in the error state */ --field-focus-ring:var(--green-light); --field-textarea-min-h:88px; /* 3 rows; resizes vertically from here */ --combo-row-h:36px; /* dropdown option row; list caps at 7 rows */ /* ---- Radio tokens ---------------------------------------------------- */ --radio-size:20px; /* dot control diameter */ --radio-dot:10px; /* inner green dot when selected */ --radio-ring:#8E8E8E; /* control border at rest (radio + checkbox) — darkened from #BDBDBD to clear 3:1 non-text */ --radio-card-fill:#F4FAF4; /* faint green tint on a selected card */ /* ---- Checkbox tokens ------------------------------------------------- */ --check-size:18px; /* box edge */ --check-disabled-fill:#C8C8C6; /* a disabled-but-checked box (forced-on) */ /* the white tick, drawn as a mask so it recolours; Lucide `check` */ --check-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); /* ---- Toggle / switch tokens ------------------------------------------ */ --switch-w:40px; /* track width */ --switch-h:22px; /* track height */ --switch-knob:18px; /* sliding knob */ --switch-off:#8E8E8C; /* track when off — darkened from #C8C8C6 to clear 3:1 (track vs canvas + white knob vs track) */ --switch-off-disabled:#E2E2E0; /* disabled + off */ --switch-on-disabled:#A5C9A7; /* disabled + on — muted green, still reads as on */ /* ---- Date picker tokens ---------------------------------------------- */ --cal-day:34px; /* calendar day cell */ --cal-popup-w:286px; /* single/range popup + datetime calendar column */ --clock-size:208px; /* analog clock face (datetime); geometry mirrored in date-picker.js */ --clock-num:30px; /* clock number hit area */ /* ---- File upload tokens ---------------------------------------------- */ --up-min-h:132px; /* dropzone min height */ --up-border:#8C8B87; /* dashed dropzone border at rest — darkened from #BFBEBA to clear 3:1 non-text */ --up-track:#E6E5E2; /* progress-bar track behind the green fill */ /* ---- Skeleton tokens ------------------------------------------------- * Loading placeholders shaped like the content that's coming. Warm-neutral to match the brand surfaces. Base = the resting grey; sheen = the lighter highlight that sweeps across it (shimmer). */ --skeleton-base:#E6E5E2; /* resting placeholder grey */ --skeleton-sheen:#F4F3F0; /* shimmer highlight */ /* ---- Modal tokens ---------------------------------------------------- * Centred dialog over a dimmed overlay. Two widths. Header is neutral by default; error / warning / info get a soft-tint band + a status icon. Bands reuse the status fills: error = --field-error-fill, info = --ib-info-fill; warning needs its own soft amber. */ --modal-w-sm:560px; /* small — text notifications, confirms */ --modal-w-lg:840px; /* large — rich content (forms, tabs, imagery) */ --modal-radius:8px; /* softer than the 4px control radius */ --modal-overlay:rgba(33,33,33,.55); /* ink at 55% (ref used UI-Slate 65%) */ --modal-shadow:0 16px 48px rgba(0,0,0,.22); --modal-warn-fill:#FBF3E0; /* soft amber band for the warning variant */ /* ---- Panel tokens ---------------------------------------------------- * Right-sliding overlay surface — the interactive counterpart to the display-only modal (holds inputs, forms, rich read content). Always over the modal overlay, full-height, hugs the right edge. Two widths. */ --panel-w-md:400px; /* default — forms, details, filters */ --panel-w-lg:720px; /* large — rich workspace, side-by-side, imagery */ --panel-shadow:-12px 0 40px rgba(0,0,0,.18); /* cast leftward, over the page */ /* ---- Card tokens ----------------------------------------------------- * Basic content card — white surface, soft shadow on the warm canvas (the --flat variant swaps the shadow for a hairline --fe-border). 8px radius matches the modal's softer corner. --card-min-h is an opt-in height floor (default none — a row equalises via .card-grid's stretch, not a fixed h). */ --card-pad:28px; /* inner padding */ --card-radius:8px; /* softer than the 4px control radius */ --card-shadow:0 1px 2px rgba(33,33,33,.05), 0 10px 28px rgba(33,33,33,.06); /* ---- Status tints (severity) ----------------------------------------- * Soft-tint pairs for status surfaces — the status badge today, shared by banners / toasts later. fill = pale tint, ink = same-hue text darkened to clear AA (≥4.5:1) on that fill. error / info / warning reuse the fills that already exist on the field / icon-button / modal, so they never drift. */ --status-success-fill:#E7F3E8; /* new — pale green */ --status-warning-fill:var(--modal-warn-fill); --status-error-fill:var(--field-error-fill); --status-info-fill:var(--ib-info-fill); --status-neutral-fill:#ECEEF0; /* new — pale slate-grey */ --status-success-ink:#256B29; /* on-tint text — all clear AA */ --status-warning-ink:#8A6600; /* amber darkened for AA on pale amber */ --status-error-ink:#B5362A; --status-info-ink:#1457A8; --status-neutral-ink:#455A64; /* ---- Tag / chip tokens ----------------------------------------------- * Small pill label for a category / keyword / selection — grey, non-loud, rounded so it never reads as the squared status badge. One style for now; fills can be added later if a use case earns them. Shared by the chosen- item chips in the multi-select dropdown. */ --tag-fill:#EAEAE6; /* warm neutral grey — distinct from the slate neutral-status tint */ --tag-ink:#55554F; /* clears AA on the fill */ /* ---- Board tokens (Data display) ------------------------------------- * The status board — one lane per stage of a workflow. Two values only: how wide a lane is, and what fills it. The lane sits one half-step deeper than the warm canvas so it reads as a container on a page that is already --fe-canvas, while the cards stay on the white surface and keep the contrast that makes them the figure rather than the ground. Everything else is reused: the hairline is --fe-border, the corners are the card / control radii, the fill fraction is the locked progress bar, and the pills are the tag and the status badge. */ --board-col-w:288px; /* lane width — a floor, not a fixed size: lanes grow to share spare room and the board scrolls sideways once they can't */ --board-lane:#EFEEEA; /* lane fill — between --fe-canvas (#F6F5F2) and --tag-fill (#EAEAE6) */ /* ---- Stat / metric + Key-value list --------------------------------- * Both compose existing tokens — no new values. The stat headline uses the H1 type size; the delta's good/bad colours reuse --status-success-ink / --status-error-ink (green = a welcome change, red = not, regardless of direction); stat dividers and key-value row rules reuse --fe-border. Noted here for traceability. */ /* ---- Code / log tokens ----------------------------------------------- * The monospace surfaces — inline code, the static code/config block, and the audit/trace log. The block body sits a touch off the warm canvas; the line-number gutter is muted and non-selectable. Syntax tints are optional and reuse the status inks where they line up. The log's level colours ARE the status inks (ok / warn / fail / info), so the audit trail matches the status badge — no new values there. */ --code-fill:#FBFBF9; /* block body — barely-off-white on the warm canvas */ --code-bar:#F3F3EF; /* header bar behind the filename + copy */ --code-ink:#33332E; /* mono body text */ --code-ln:#BDBDB8; /* line-number gutter — muted, non-selectable (decorative) */ --code-inline-fill:#ECECE8; /* inline chip fill */ --code-inline-ink:#3A3A36; /* inline text — clears AA on the chip */ --code-key:var(--status-info-ink); /* syntax: keys / attributes (#1457A8) */ --code-str:var(--status-success-ink); /* syntax: strings (#256B29) */ --code-num:#8A4B00; /* syntax: numbers / literals — warm brown, clears AA */ /* ---- Empty state ----------------------------------------------------- * No new values. The centred placeholder composes existing tokens: the icon is --fe-text-2 (muted) by default and switches to --status-error-ink / -success-ink / -info-ink via a tone modifier; title --fe-text, body --fe-text-2; the action reuses the button. Noted here for traceability. */ /* ---- Tabs (Navigation) ----------------------------------------------- * Underline tabs between sibling views. No new values — composes existing tokens: active = --green-deep (text + 2px underline), inactive = --fe-text-2 (→ --ink on hover); the optional count chip reuses --tag-fill / --tag-ink, going --green-light / --green-text on the active tab; the "More ▾" overflow menu reuses the dropdown popup (.menu / .menu__row → --surface-hover hover, --green-light selected). Noted here for traceability. */ /* ---- Footer (Navigation) -------------------------------------------- * The site / app footer — the one dark-inverted surface in the system: a warm near-black that closes the page beneath the warm canvas. Near-white text, a muted warm grey for links at rest (clears AA on the surface), and a faint white hairline between the body and the bottom bar. The only new values a dark surface genuinely earns; everything inside (link, form-field, button, icon-button) is reused and re-tinted in place. The reversed mark is assets/logo/logo-footer.svg (green icon, white wordmark, green .ai). */ --footer-surface:#1E1D1B; /* warm near-black */ --footer-text:#F3F2EE; /* near-white, warm — headings / strong / link hover */ --footer-text-2:#ADAAA2; /* muted warm grey — links + body at rest; lightened from #A6A39C to ~7:1 (AAA) for comfort on the dark surface */ --footer-border:rgba(255,255,255,.10); /* hairline between body and bottom bar */ /* ---- Status bar (Navigation) ---------------------------------------- * The signed-in platform status bar: a strip pinned to the viewport bottom carrying a worst-of health dot and a drop-up of per-connection detail. It sits on the footer's dark surface, which is what earns the three on-dark status colours below. Measured on --footer-surface (#1E1D1B) the light-canvas status inks fall short as text: --status-success is 4.09:1 and --status-error only 3.10:1, against the 4.5:1 AA needs. Red — the state that matters most — is the worst of them. These are the same hues lightened until they clear AA with room, the move --footer-text-2 already makes on this surface. The dot alone would pass at 3:1 on the originals; it shares these so a state reads the same colour as its word. */ --status-success-on-dark:#66BB6A; /* healthy — 7.12:1 on --footer-surface */ --status-warning-on-dark:#D9A441; /* degraded — 7.49:1 */ --status-error-on-dark:#EA8078; /* down — 6.30:1 */ --statusbar-h:32px; /* bar height — deliberately below the 44px touch minimum; the trigger buys the difference back with an enlarged hit area */ --statusbar-dot:8px; /* traffic-light dot diameter */ /* ---- Stepper (Navigation) ------------------------------------------- * Vertical (default) or horizontal progress rail for a multi-step flow. The numbered marker is a circle that fills green when active or complete; complete swaps the number for a check (the --check-glyph mask). Otherwise reuses the inks, radius and spacing — no other new values. */ --step-marker:28px; /* numbered marker diameter */ /* ---- Rating slider (Inputs & forms) --------------------------------- * A labelled slider that snaps to the stops of a small discrete scale (a rating). Native range input; green fills the track to the left of the handle. The unrated state greys the handle until the first interaction. */ --slider-track:6px; /* track thickness */ --slider-thumb:20px; /* handle diameter */ /* ---- Native select (Form field) ------------------------------------- * A native