/* nominate.css — the nominate.ai palette, expressed as a Loom theme. * * THIS IS THE SEAM, AND IT IS LOOM'S OWN. * loom.css is 4,200 lines and it is token-pure: every colour, shadow, radius * and face in it resolves through a custom property. That is not a lucky * accident — the platform ships ten interchangeable themes (oxblood, parchment, * ocean, …) and a per-tenant palette layer, so the discipline was enforced by * having to actually work. It means we can reskin ~65 widgets without touching * a line of vendored CSS, and a re-vendor cannot silently revert our design. * * Everything a theme file CAN carry lives here: colour, elevation, type * family, radius. Everything it cannot — border weight, font weight, the press * gesture, the label idiom — lives next door in skin.css, because those are * baked into loom.css's component rules as literals rather than tokens. * * ── Values are aliases, never hexes ──────────────────────────────────────── * Every colour below resolves out of site/src/styles/tokens.css through the * --n-* aliases that vendor-loom.mjs generates into tokens.css. Nothing here * is a copied hex. When the design system moves, this file moves with it, and * the widget zoo cannot drift into being a third copy of the palette — which * is exactly the failure mode the lab exists to avoid (there were already two). * * The aliases are generated as LITERALS rather than var() references, and that * detail is load-bearing. Four token names exist in both systems with * different meanings — --surface, --accent, --muted, --blue — so this file has * to redefine names it also needs to read. Written the obvious way that is a * custom-property cycle, CSS resolves the whole cycle to guaranteed-invalid, * and every `var(--surface, #fafafa)` in the toolkit silently falls through to * its literal fallback. Cost of learning that: a zoo whose every demo panel * rendered white-on-white. See vendor-loom.mjs. */ @import url('./tokens.css'); /* Both selectors deliberately. The attribute form is what the shim sets and what wins against a stale data-theme in localStorage; the bare :root form means the skin is correct on the very first paint, before any script has run. A theme that only applies once JS boots shows the user a flash of oxblood, which is the one thing a design review must not put on screen. */ :root, :root[data-theme='nominate'] { /* ── Elevation ────────────────────────────────────────────────────────── Loom expects five ascending layers. nominate's system only names three (--space → --surface → --subtle), because on a flat, hard-shadowed design depth is carried by the shadow and the border, not by twelve shades of ground. The two extra layers are mixed rather than invented, so they stay on the same plum ramp when the base tokens move. */ --bg: var(--n-space); --surface: var(--n-surface); --surface2: var(--n-subtle); --layer-2: color-mix(in srgb, var(--n-subtle) 82%, var(--n-foreground)); --layer-3: color-mix(in srgb, var(--n-subtle) 72%, var(--n-foreground)); /* ── Borders ──────────────────────────────────────────────────────────── Never a grey border — mauve, always. --border-subtle is the hairline used between table rows, where the full line weight reads as a grid. */ --border: var(--n-line); --border-subtle: color-mix(in srgb, var(--n-line) 55%, var(--n-space)); --border-accent: color-mix(in srgb, var(--n-accent) 40%, transparent); /* ── Text ─────────────────────────────────────────────────────────────── Loom has a three-step scale; nominate names two. --muted (Loom's tertiary) is mixed toward the line colour so it sits below body-muted without falling out of contrast. */ --text: var(--n-foreground); --subdued: var(--n-muted); --muted: color-mix(in srgb, var(--n-muted) 62%, var(--n-line)); --disabled: color-mix(in srgb, var(--n-line) 55%, var(--n-space)); /* ── Accent ───────────────────────────────────────────────────────────── Gold is the hover state everywhere else in this system, so it is the hover state here. --accent-glow is a soft halo Loom uses behind focus rings; a glow is a blur, and this system has no blurs, so it is emptied rather than re-tinted. skin.css puts the real focus ring back. */ /* ⚠️ THREE OF THE FOUR GROUND TOKENS WERE NEVER ALIASED, AND THAT IS WHY AN APP COULD NOT FULLY RE-THEME ITSELF. `--surface` reads `var(--n-surface)` and always has; `--space`, `--subtle` and `--line` stayed LITERALS from tokens.css line 10, so they were the family plum in all thirteen apps whatever their brand. Measured 2026-09-04: `--line` has 35 call sites and `--n-line` 33 — two spellings of one token, both live, and an app that declared one got a half-themed result. cbsitrep set `--n-line: #4a2327` with its garnet palette and thirty-five borders stayed violet; it had already hand-patched `--surface`/`--bg`/`--border` around the same gap without the cause being visible. This is the components.css header's own rule — "a design system that ships two spellings of one component has already lost the argument it exists to win" — one layer down, in the tokens. Aliasing changes nothing for an app that declared neither, because the defaults are equal. */ --space: var(--n-space); --subtle: var(--n-subtle); --line: var(--n-line); --accent: var(--n-accent); --accent-hover: var(--n-gold); --accent-glow: transparent; /* ── Semantic ─────────────────────────────────────────────────────────── Pink means refusal or breakage across the whole site and is never decorative, which lines up exactly with Loom's --red. Amber → gold, green → mint, info → the source blue. */ --green: var(--n-mint); /* ⚠️ NOT `var(--n-gold)`. Gold is a BRAND slot — the second colour, what `--accent-hover` and highlighted text wear — and ten of eleven Apex brands set it: pink in cbconnector, green in cbadmin, near-white in cbnight, teal in cbvipulse. With amber derived from it, a warning in those apps wore the brand's second colour: indistinguishable from `--red` in one, from `--green` in another, from the accent in a third (measured 2026-08-28 on VI Pulse HR: EXPIRING, SENT, MODERATE and "arb. ?" all teal). A semantic colour cannot ride on a palette slot. A brand that wants its own warning colour sets `--n-amber` deliberately in brand.css (which loads last); the default is the system's gold, DECLARED here rather than left to a `var()` fallback, so the dial exists as a token and not only as prose (cbapex#176; tokens-exist.test.ts). semantic-amber.test.ts pins this. */ --n-amber: #ffba55; --amber: var(--n-amber); --red: var(--n-pink); --red-fill: var(--n-pink); --info: var(--n-blue); /* ── Categorical ──────────────────────────────────────────────────────── Loom's chart hues are deliberately un-themed ("blue==blue for recognition"). We still retint them, because the stock set is web-default #3b82f6/#8b5cf6/#ec4899 and dropping saturated primaries into this palette is what makes a page look like two designs stapled together. The recognition argument holds within a hue family, and these stay blue/violet/pink/mint. */ --blue: var(--n-blue); --purple: var(--n-violet); --pink: var(--n-pink); --cyan: color-mix(in srgb, var(--n-blue) 70%, var(--n-mint)); /* ── Depth: offset only, zero blur ────────────────────────────────────── The single largest visual move in this file. Loom's shadows are the modern soft-elevation set (12px blur, layered, ~35% alpha); nominate's are hard offsets with no blur at all. Remapping the tokens converts every card, popover, modal and toast in the toolkit at once — a blurred edge reads as a different design language and immediately looks borrowed. */ --sh-1: var(--n-hard); --sh-2: var(--n-hard-card); --shadow-sm: var(--n-hard); --shadow-md: var(--n-hard-card); --shadow-lg: var(--n-hard-card); --shadow-glow: none; /* ── Glass ────────────────────────────────────────────────────────────── Flattened, not tinted. A backdrop blur under a hard-shadow design is the same category error as a soft shadow, so --glass-blur goes to zero and the translucent ground becomes the opaque one. */ --glass-bg: var(--n-surface); --glass-border: var(--n-line); --glass-blur: 0px; /* ── Gradients → flat fills ───────────────────────────────────────────── Nothing in this system is a gradient. Each collapses to the single colour it would have started from, so any component reaching for one still gets a valid paint. */ --gradient-accent: var(--n-accent); --gradient-hero: var(--n-accent); --gradient-surface: var(--n-space); /* ── Data visualisation ───────────────────────────────────────────────── Ordered for adjacent-pair distinctness, not by hue family: a stacked bar puts 1 next to 2, so accent/blue/mint/gold/violet/pink alternates warm and cool rather than running orange→gold→pink through three near-neighbours. */ --viz-1: var(--n-accent); --viz-2: var(--n-blue); --viz-3: var(--n-mint); --viz-4: var(--n-gold); --viz-5: var(--n-violet); --viz-6: var(--n-pink); /* ── Type ─────────────────────────────────────────────────────────────── Loom runs three faces (Bricolage Grotesque display, Hanken Grotesk body, JetBrains Mono). nominate runs one sans and one mono, both from the system stack — no webfont, which is also why the vendor step drops Loom's fonts.css. Display and body collapse to the same family; hierarchy in this system comes from weight, not from a second face. */ --font-display: var(--n-font-sans); --font-body: var(--n-font-sans); --font-mono: var(--n-font-mono); --mono: var(--n-font-mono); /* legacy alias — widget-zoo.css still reads it */ /* ── Radius ───────────────────────────────────────────────────────────── Tightened roughly 2× (Loom: 5/9/13/18px). Soft corners under hard shadows read as a bevel; this system stays close to square. The pill is kept — the filter chip is a pill by design in both systems. */ --r-sm: 3px; --r-md: 5px; --r-lg: 7px; --r-xl: 9px; --r-pill: 999px; /* ── Code / terminal ──────────────────────────────────────────────────── Read by the LoomScript and ANSI panels. */ --code-bg: var(--n-space); --code-fg: var(--n-gold); --term-bg: var(--n-space); --term-fg: var(--n-muted); --theme-type: dark; color-scheme: dark; }