/* SYNCED COPY — DO NOT EDIT — source: LicensingManagement/LDataBrain/wwwroot/css/ldata-tokens.css (sha256:ca7b612189022a2e) — run scripts/sync-design-tokens.sh */ /* ============================================================================ ldata-tokens.css — v1 — the LDataBrain design-token registry (--ld-*) CANONICAL COPY: LicensingManagement/LDataBrain/wwwroot/css/ldata-tokens.css Distributed to every module by scripts/sync-design-tokens.sh — edit ONLY the canonical copy, then re-run the sync script. Authority: DESIGN.md (root) + docs/05-frontend-ui.md + docs/06 token tables. Theme model: html[data-theme] ∈ light|gray|black. Light lives on :root; the DARK BASE block below is selected by gray AND black together, and the black block after it restates only what true-black changes. Both dark themes must appear on the base selector — sibling attribute selectors do not inherit from each other, so a token listed only under gray resolves to the LIGHT :root value on a black page. Directus runtime tinting folds in through var(--ui-*) fallback chains on page-bg / brand / line ONLY (cards are contractually solid — never chain --ld-card-bg to --ui-card). ========================================================================== */ /* ══ SEEDS ══════════════════════════════════════════════════════════════════ The three values a user is allowed to change, and the only three. Everything below derives from them, so a preference cannot break a relationship the design depends on: the contrast ramps, the depth budget and the type scale are deliberately NOT exposed, because that is where the guarantees live. Set them per user by writing this block into :root at render time - the same mechanism --ui-brand already uses. Write the PREFERENCE as --ui-brand / --ui-density / --ui-radius on :root. Never write --ld-seed-* directly: the dark themes set the seed in a (0,1,1) block, so a (0,1,0) :root preference would silently lose to it. --ui-brand any colour; the whole interaction ramp derives from it --ui-density 0.85 compact … 1.15 comfortable (unitless multiplier) --ui-radius 0 square … 1.5 round (unitless multiplier) --ui-surface 0 neutral · 1 slate · 2 brand — where the NEUTRALS take their hue from (see The Surface Hue Rule below) --ui-text 1 · 1.15 · 1.3 — the ACCESSIBILITY text size. Not a design seed: it scales the root font-size, so everything sized in rem grows together, exactly as browser zoom would, and no composition has to know about it. ═══════════════════════════════════════════════════════════════════════════ */ :root { --ld-seed-brand: var(--ui-brand, #0073bb); --ld-seed-density: var(--ui-density, 1); --ld-seed-radius: var(--ui-radius, 1); --ld-seed-surface: var(--ui-surface, 1); --ld-seed-text: var(--ui-text, 1); /* How far the brand reaches into the SURFACES. Small on purpose: enough that floor, card and tile read as one world with the accent, not so much that it becomes a coloured theme. Without it a custom brand touched only the button and a few labels, which reads as an error rather than as branding. Raising this past ~6% starts eating the contrast headroom the ramps rely on, so it is a system value, not a user seed. */ --ld-brand-tint: 2%; /* ── THE SURFACE HUE ───────────────────────────────────────────────── Every neutral the platform paints — floor, card, tile, border, table chrome, the dark bar — is a LIGHTNESS on one hue, and this is where that hue comes from. Slate (#64748b, 257°) is the incumbent: the cool blue-grey the three themes were built on. Brand takes the hue of the chosen colour instead — a violet operator gets violet-slate floors, an amber one gets warm ones — while every L and C stays exactly what it was, so the Depth Budget and every AA ramp are preserved BY CONSTRUCTION rather than re-audited per brand. Neutral drops the chroma to zero for the operator who wants a pure grey. Two flags derive from the one seed so a page never branches on it: --ld-surface-chroma 0 neutral · 1 slate · 1.5 brand (a hue the user chose deserves to be seen; the extra half step is still far under gamut at these L) --ld-surface-brand 0 · 0 · 1 — mixes the brand hue into the source An achromatic brand (a grey) has no hue to give; color-mix carries the slate hue across a missing component, so the fallback is automatic. */ --ld-surface-chroma: calc(min(1, var(--ld-seed-surface)) + max(0, var(--ld-seed-surface) - 1) * .5); --ld-surface-brand: max(0, calc(var(--ld-seed-surface) - 1)); --ld-hue-src: color-mix(in oklch, #64748b, var(--ld-seed-brand) calc(var(--ld-surface-brand) * 100%)); /* ── THE NEUTRAL RAMP ──────────────────────────────────────────────── The slates as lightness steps on the surface hue. Each entry is the exact oklch of the hex it replaces (named by L×100), so the default renders the incumbent palette to the unit; the hue channel is the only thing a seed can move. Light reads 98…58, the dark themes 37…21. */ --ld-neutral-98: oklch(from var(--ld-hue-src) .9837 calc(.0051 * var(--ld-surface-chroma)) h); /* #f7fafd tile, inset, subcard */ --ld-neutral-96: oklch(from var(--ld-hue-src) .9618 calc(.0086 * var(--ld-surface-chroma)) h); /* #eef3f8 row hover */ --ld-neutral-94: oklch(from var(--ld-hue-src) .9443 calc(.0109 * var(--ld-surface-chroma)) h); /* #e8edf4 card */ --ld-neutral-92: oklch(from var(--ld-hue-src) .9200 calc(.0138 * var(--ld-surface-chroma)) h); /* #dfe5ee secondary surface, table head */ --ld-neutral-91: oklch(from var(--ld-hue-src) .9131 calc(.0144 * var(--ld-surface-chroma)) h); /* #dce3ec tab nav, badge, ghost hover */ --ld-neutral-90: oklch(from var(--ld-hue-src) .9040 calc(.0144 * var(--ld-surface-chroma)) h); /* #d9e0e9 floor */ --ld-neutral-89: oklch(from var(--ld-hue-src) .8944 calc(.0162 * var(--ld-surface-chroma)) h); /* #d5dde7 divider, row border */ --ld-neutral-87: oklch(from var(--ld-hue-src) .8747 calc(.0216 * var(--ld-surface-chroma)) h); /* #ccd7e4 tile border, select border */ --ld-neutral-86: oklch(from var(--ld-hue-src) .8628 calc(.0199 * var(--ld-surface-chroma)) h); /* #c9d3df line, border, glass border */ --ld-neutral-85: oklch(from var(--ld-hue-src) .8469 calc(.0217 * var(--ld-surface-chroma)) h); /* #c3cedb card border, ghost border */ --ld-neutral-83: oklch(from var(--ld-hue-src) .8252 calc(.0219 * var(--ld-surface-chroma)) h); /* #bcc7d4 table input border */ --ld-neutral-78: oklch(from var(--ld-hue-src) .7842 calc(.0181 * var(--ld-surface-chroma)) h); /* #b0bac4 tab nav border */ --ld-neutral-58: oklch(from var(--ld-hue-src) .5750 calc(.0440 * var(--ld-surface-chroma)) h); /* #6b7d96 input border - one step under it, so 3:1 holds on the floor for a green-hued brand too */ --ld-neutral-37: oklch(from var(--ld-hue-src) .3717 calc(.0392 * var(--ld-surface-chroma)) h); /* rgb(51,65,85) graphite card */ --ld-neutral-34: oklch(from var(--ld-hue-src) .3446 calc(.0383 * var(--ld-surface-chroma)) h); /* #2c3a4d the dark bar */ --ld-neutral-28: oklch(from var(--ld-hue-src) .2795 calc(.0368 * var(--ld-surface-chroma)) h); /* #1e293b select well */ --ld-neutral-26: oklch(from var(--ld-hue-src) .2557 calc(.0203 * var(--ld-surface-chroma)) h); /* rgb(30,35,45) glass */ --ld-neutral-21: oklch(from var(--ld-hue-src) .2077 calc(.0398 * var(--ld-surface-chroma)) h); /* #0F172A night floor */ /* Blackout stays achromatic — #000 is the theme's identity — and takes only a hint of the brand hue on its lifted card, only in brand mode. */ --ld-neutral-27k: oklch(from var(--ld-hue-src) .2727 calc(.012 * var(--ld-surface-brand)) h); /* rgb(39,39,39) blackout card */ } /* THE ROOT SIZE. A shell declares its base as --ld-root-font (the cloud and local shells: 14px, 16px from 768px) instead of as font-size, and this one rule turns it into the real size times the accessibility text seed. A document that declares no base gets 100% × seed - the browser default, scaled - which is exactly what an embedded module wants. */ html { font-size: calc(var(--ld-root-font, 100%) * var(--ld-seed-text)); } /* The Blue Split Rule: the dark themes carry their own brand default. A user seed overrides both, because --ui-brand feeds the seed on every theme. */ html[data-theme="gray"] , html[data-theme="black"] { --ld-seed-brand: var(--ui-brand, #3b82f6); } /* ── Light (default) ─────────────────────────────────────────────────────── */ :root { /* page & outer card */ --ld-page-bg: var(--ui-bg, color-mix(in srgb, var(--ld-seed-brand) var(--ld-brand-tint), var(--ld-neutral-90))); --ld-card-bg: color-mix(in srgb, var(--ld-seed-brand) var(--ld-brand-tint), var(--ld-neutral-94)); --ld-card-border: var(--ld-neutral-85); --ld-card-shadow: 0 1px 4px rgba(0, 0, 0, .1); --ld-border: var(--ld-neutral-86); --ld-line: var(--ui-line, var(--ld-neutral-86)); --ld-divider: var(--ld-neutral-89); --ld-ring: rgba(0, 0, 0, .06); /* inner surfaces */ --ld-stat-bg: color-mix(in srgb, var(--ld-seed-brand) var(--ld-brand-tint), var(--ld-neutral-98)); --ld-stat-border: var(--ld-neutral-87); --ld-tile-shadow: 0 1px 2px rgba(15, 23, 42, .06); --ld-stat-shadow: 0 6px 24px -4px rgba(0, 0, 0, .15); --ld-section-shadow: 0 6px 24px -4px rgba(0, 0, 0, .1); --ld-surface-secondary: var(--ld-neutral-92); --ld-surface-tertiary: var(--ld-neutral-92); --ld-surface-subtle: var(--ld-neutral-92); --ld-surface-accent: var(--ld-neutral-90); --ld-subcard-bg: var(--ld-neutral-98); --ld-subcard-border: var(--ld-neutral-87); /* text */ --ld-text: #16191f; --ld-text-value: #16191f; --ld-text-secondary: #545b64; --ld-text-muted: #5d636f; --ld-text-dim: #5c626e; /* Clamped, not merely derived: a stat label sits on the FLOOR as well as on a tile, so the seed cannot drag it out of AA. The clamp holds a floor for every hue; a brand extreme enough to fail anyway is refused at the point of choice by the preferences page, which is better than whitening every label on the platform to survive the worst case. The clamp is .47, not .48: Forest - an offered swatch - measured 4.46 on the FLOOR at .48 (the check runs against the tile, the label also sits on the floor). */ --ld-stat-label: oklch(from var(--ld-seed-brand) min(l, .47) c h); --ld-helper: #545b64; /* brand / accent */ --ld-brand: var(--ld-seed-brand); --ld-brand-strong: color-mix(in srgb, var(--ld-seed-brand) 75%, #000); --ld-brand-stronger: color-mix(in srgb, var(--ld-seed-brand) 62%, #000); --ld-sky: var(--ld-seed-brand); --ld-sky-strong: var(--ld-seed-brand); --ld-focus-border: var(--ld-seed-brand); /* The ring is TWO layers, and both are load-bearing. A single translucent wash (this was brand at 15%) measured 1.15-1.31:1 against its own surface - WCAG 1.4.11 wants 3:1 for a focus indicator, so keyboard focus was effectively invisible on every .ld-btn and .ld-input on the platform, while the UNSTYLED selects beside them scored 7.5:1 on the UA ring. The inner 2px in the card colour is the offset: without it an opaque ring drawn straight onto a filled .ld-btn is brand-on-brand (1.75:1) and disappears again. Blackout needs no third definition because it declares its --ld-card-bg on , the same element this ring is declared on. That is the whole mechanism, and it does not extend downward: a composed custom property is substituted where it is DECLARED, then inherits already resolved. Re-pointing --ld-focus-ring-color inside a scope deeper in the tree - a dark top bar on a light page - does NOT reach these two; such a scope has to re-declare --ld-focus-ring and --ld-focus-ring-flat itself. */ --ld-focus-ring-color: var(--ld-seed-brand); --ld-focus-ring: 0 0 0 2px var(--ld-card-bg), 0 0 0 4px var(--ld-focus-ring-color); /* The flat ring is for controls that are already transparent - ghost buttons, icon buttons, date-picker cells. They have no fill for the ring to disappear into, so they need no offset, and the offset actively hurts there: it paints a card-coloured band onto whatever the control really sits on (a toast measured 1.56:1 against it) and it needs 8px of gutter that a 7-column day grid does not have. */ --ld-focus-ring-flat: 0 0 0 2px var(--ld-focus-ring-color); /* tabs */ --ld-tab-active-bg: oklch(from var(--ld-seed-brand) .9452 .0221 h); --ld-tab-active-border: oklch(from var(--ld-seed-brand) .7746 .0741 h); /* The SELECTED tab is text an operator must read, and the raw seed measured 4.30:1 on the tab fill at 11px — under small-text AA. Same technique as the stat label: the accent clamped one step deeper. The underline keeps the raw seed; a 2.5px bar is graphical, judged at 3:1. */ --ld-tab-active-text: oklch(from var(--ld-seed-brand) min(l, .48) c h); --ld-tab-underline: var(--ld-seed-brand); --ld-tab-nav-bg: var(--ld-neutral-91); --ld-tab-nav-border: var(--ld-neutral-78); --ld-tab-nav-shadow: 0 2px 6px -1px rgba(0, 0, 0, .10), 0 0 0 1px rgba(0, 0, 0, .06); --ld-tab-frame-bg: var(--ld-neutral-98); --ld-tab-frame-border: var(--ld-neutral-85); /* navigation rail The rail is a tab strip stood on its end: one item is "you are here" and the rest are destinations. It therefore borrows the SELECTED-tab family rather than inventing a second selected-state vocabulary — the same clamped accent, the same tint, the same border weight. Before this existed, ten of the eleven rails pinned the selected item to bg-slate-600. The shim maps that onto --ld-surface-secondary, a 3% white veil, so the item an operator navigated to measured 1.25:1 against the rail behind it in gray and 1.27:1 in black — invisible. Light kept a brand-tinted pill through a stack of !important patches. This restores the brand mark that light theme already had, to all three themes, from one declaration. */ --ld-rail-bg: var(--ld-card-bg); --ld-rail-border: var(--ld-card-border); --ld-rail-text: var(--ld-text); /* Hover is a veil of the rail's OWN text colour, so it steps up from whatever surface the theme gives the rail instead of a fixed slate. */ --ld-rail-hover-bg: color-mix(in srgb, currentColor 10%, transparent); --ld-rail-active-bg: var(--ld-tab-active-bg); /* NOT the tab's border. A tab sits inside a nav strip that already frames it; a rail item sits directly on the rail, and the tab hairline measured 1.03:1 against it in light and 1.38:1 in black — the selected item was distinguished by its text colour alone, which is the one thing WCAG 1.4.1 forbids as a sole signal. The underline accent is the same brand at a strength that draws a real boundary. */ --ld-rail-active-border: var(--ld-tab-underline); --ld-rail-active-text: var(--ld-tab-active-text); /* The tree guide down the open group's children. Neutral, not branded: it marks structure, and a coloured rail here would compete with the selected item that is the only thing in the strip worth a colour. */ --ld-rail-guide: color-mix(in srgb, currentColor 22%, transparent); --ld-rail-sub-bg: color-mix(in srgb, currentColor 5%, transparent); /* Icon-only width. Video runs 4rem; retune this rather than redeclaring the collapsed rules. */ --ld-rail-collapsed-w: 3.5rem; /* A group icon reads one step above its children, never below. Both sit in a 1rem box so the labels form a column. */ /* The rail collapse is ONE motion on ONE component, and it was running at two durations: .25s in the two shells and the five AI-module layouts, .28s in Projects, Monitoring, Service and Finance — three of which carried BOTH values in the same file. DESIGN.md documents .28s, so the token takes that and every rail points at it instead of restating a number. 30ms is imperceptible; two answers to one documented question is not. */ --ld-rail-motion: .28s; --ld-rail-icon: .875rem; --ld-rail-icon-sub: .8125rem; /* Collapsed, the rail has no hierarchy left to express — every row is just a destination — so group and child glyphs share one larger size and the icon column reads as a single instrument strip. Five module layouts had already agreed on this value as a bare literal; it is a component size, so it belongs to the component. */ --ld-rail-icon-collapsed: 1.05rem; /* chips / badges */ --ld-chip-bg: oklch(from var(--ld-seed-brand) .9514 .0193 h); --ld-chip-border: oklch(from var(--ld-seed-brand) .8180 .0655 h); --ld-chip-text: oklch(from var(--ld-seed-brand) .4487 min(c, .1076) h); --ld-chip-brand-bg: var(--ld-chip-bg); --ld-chip-brand-border: var(--ld-chip-border); --ld-chip-brand-text: var(--ld-chip-text); --ld-chip-brand-icon: var(--ld-seed-brand); --ld-badge-bg: var(--ld-neutral-91); --ld-badge-border: var(--ld-neutral-86); --ld-pill-neutral-bg: var(--ld-neutral-90); --ld-chip-select-bg: oklch(from var(--ld-seed-brand) .9319 .0316 h); --ld-chip-select-text: oklch(from var(--ld-seed-brand) .4244 min(c, .1809) h); --ld-chip-select-border: oklch(from var(--ld-seed-brand) .8091 .0956 h); /* star / favorite */ /* Star glyphs are graphical elements, judged at 3:1 — and both light values missed it on the button fill (#b7791f 2.82, #7d8998 2.75 on #dce3ec). One step deeper each, same hue: 3.55 / 3.51, and stronger on the card. */ --ld-star-active: #a06a1b; --ld-star-muted: #6b7789; --ld-star-btn-bg: var(--ld-neutral-91); --ld-star-btn-border: var(--ld-neutral-86); --ld-star-on-bg: rgba(251, 191, 36, .12); --ld-star-on-border: rgba(251, 191, 36, .35); --ld-star-on-text: #a06a1b; /* tables */ --ld-table-bg: var(--ld-neutral-98); --ld-table-head-bg: var(--ld-neutral-92); --ld-table-head-border: var(--ld-neutral-85); --ld-table-filter-bg: var(--ld-neutral-92); --ld-table-row-border: var(--ld-neutral-89); --ld-table-row-hover: var(--ld-neutral-96); --ld-table-input-bg: #ffffff; --ld-table-input-border: var(--ld-neutral-83); --ld-action-pill-bg: var(--ld-chip-bg); --ld-action-pill-border: var(--ld-chip-border); /* forms */ --ld-form-card-bg: var(--ld-neutral-94); --ld-form-card-border: var(--ld-neutral-85); --ld-form-card-shadow: 0 1px 4px rgba(0, 0, 0, .1); --ld-input-bg: #ffffff; /* A field's boundary is a user-interface component boundary: 3:1, not a decorative hairline. #bcc7d4 measured 1.26 against the page and 1.46 on a card — the field was legible only because the Tailwind forms base was painting it white, and it disappeared the moment that was corrected. */ --ld-input-border: var(--ld-neutral-58); --ld-input-text: #16191f; --ld-input-placeholder: #5d636f; --ld-form-label: #545b64; --ld-select-bg: #ffffff; --ld-select-border: var(--ld-neutral-87); --ld-select-text: #16191f; --ld-option-checked-bg: var(--ld-chip-select-bg); --ld-option-checked-text: var(--ld-chip-select-text); --ld-multi-hover: var(--ld-neutral-91); /* buttons */ --ld-btn-bg: var(--ld-seed-brand); --ld-btn-hover-bg: var(--ld-brand-strong); --ld-btn-border: var(--ld-brand-strong); --ld-btn-hover-border: var(--ld-brand-stronger); --ld-btn-text: #ffffff; --ld-btn-shadow: 0 1px 2px rgba(0, 0, 0, .12); --ld-btn-ghost-border: var(--ld-neutral-85); --ld-btn-ghost-text: #16191f; --ld-btn-ghost-hover-bg: var(--ld-neutral-91); /* status */ --ld-success-bg: #e8f8ec; --ld-success-border: #b5eac0; --ld-success-text: #03720b; /* MESH — the fourth semantic family, added 2026-08-22. success/warn/error/brand cover severity; this one is not a severity but a RUNG: a connection that is direct yet travels the network. It is mixed from the two states it sits between (local success, cloud brand) rather than picked, so it stays in the palette when the brand seed changes, and pulled toward the theme's own text colour so it clears the contrast floor in both — the raw mix measured 4.25:1 light and 3.76:1 dark on its own chip; this reads 6.37:1 and 4.67:1. */ --ld-mesh-hue: color-mix(in srgb, var(--ld-success-text) 55%, var(--ld-brand)); --ld-mesh-text: color-mix(in srgb, var(--ld-mesh-hue) 64%, var(--ld-text-value)); --ld-mesh-bg: color-mix(in srgb, var(--ld-mesh-text) 12%, transparent); --ld-mesh-border: color-mix(in srgb, var(--ld-mesh-text) 35%, transparent); --ld-error-bg: #fceeea; --ld-error-border: #fcc8be; --ld-error-text: #ba2c10; --ld-warn-bg: #fdf4d6; --ld-warn-border: #f5d481; --ld-warn-text: #7a5f04; /* DESIGN.md documents a FILLED danger button (#dc2626, hover #ef4444) but only its border and hover-wash were ever tokenised, so pages reaching for one used --ld-error-text as a background instead: that is an INK token, pale on the dark themes, and white-on-it measured 1.69:1 there. */ --ld-danger-btn-bg: #c0392b; --ld-danger-btn-hover-bg-solid: #a93226; --ld-danger-btn-border: #e5b7ae; --ld-danger-btn-hover-bg: #fbe8e4; --ld-btn-danger-bg: #dc2626; --ld-btn-danger-hover-bg: #ef4444; /* overlays */ --ld-backdrop: rgba(0, 0, 0, .25); --ld-glass-bg: rgba(255, 255, 255, .92); --ld-glass-border: var(--ld-neutral-86); --ld-glass-shadow: 0 20px 60px -12px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .06); /* radius & rhythm (theme-invariant, derived from the seeds) */ /* Accent corners — scrollbar thumbs, mini-chips, keycaps. A real step used at ~90 call sites before it was written down. */ --ld-radius-xs: 3px; --ld-radius-sm: calc(.375rem * var(--ld-seed-radius)); --ld-radius-md: calc(.5rem * var(--ld-seed-radius)); --ld-radius-lg: calc(.75rem * var(--ld-seed-radius)); --ld-radius-xl: calc(1rem * var(--ld-seed-radius)); /* Deliberately NOT scaled: a pill is a shape, not a step on the radius scale. Squaring it would turn every status pill into a rectangle. */ --ld-radius-full: 9999px; --ld-space-1: calc(.25rem * var(--ld-seed-density)); --ld-space-2: calc(.5rem * var(--ld-seed-density)); --ld-space-3: calc(.75rem * var(--ld-seed-density)); --ld-space-4: calc(1rem * var(--ld-seed-density)); --ld-space-5: calc(1.5rem * var(--ld-seed-density)); --ld-card-pad: var(--ld-space-4); --ld-tile-gap: var(--ld-space-3); --ld-fs-stat: 1.5rem; --ld-fs-stat-mobile: 1.375rem; /* Secondary value: a tile that repeats a headline number in a denser row needs to read as the same kind of thing, one step quieter. */ --ld-fs-stat-sm: 1.125rem; --ld-fs-icon-sm: .65rem; /* ── The type ramp ─────────────────────────────────────────────────── DESIGN.md has named these steps since the program began; the registry never carried them, so pages wrote the number. Left alone, a ramp written by hand drifts: the FIX module alone had .625, .65, .68, .7, .72, .75, .76, .78, .8 and .8125rem in play — ten sizes doing the work of four, none of them a decision. These are the four, plus the two the components already use, so a page can name the step instead of guessing it. Unlike the spacing scale they do NOT multiply by the density seed: text size is its own accessibility control (--ui-text on the root font-size), and multiplying the two would compound. */ --ld-fs-nano: .5625rem; /* the smallest legible mark - counts, units */ --ld-fs-micro: .6875rem; /* uppercase micro-labels, chips (= 11px) */ --ld-fs-label: .75rem; /* field labels, table meta, helper text */ --ld-fs-sm: .8125rem; /* section titles, code, dense body */ --ld-fs-body: .875rem; /* body copy */ --ld-fs-lg: 1rem; /* lead paragraphs, a value inside prose */ /* ── Categorical series (charts only) ──────────────────────────────── Identity, not status. The One Accent Rule reserves blue for interaction and green/red/amber for things that actually succeeded, failed or need caution — so a chart with five series cannot borrow them, and the pages that tried collapsed eight slots onto three status tokens: --ld-error-text landed on series 2, 4, 5 and 7, which painted three unrelated engines the same alarm red and told the operator they were failing. Assign by fixed slot order and never cycle: colour follows the ENTITY, so a filter that drops a series must not repaint the rest. Past eight, fold into "Other" or facet — a ninth hue is never generated. The order is the CVD-safety mechanism, not decoration. Measured on the real card of each theme (adjacent pairs, OKLab ΔE×100): worst CVD 9.1 light / 8.4 dark against an 8.0 target, worst normal-vision 19.6 light / 19.3 dark against a 15 floor. On light and gray four slots sit under 3:1 against the card, so a chart using them owes the reader relief — a legend with labels, direct labels, or the table that carries the same numbers. Bars also keep a 2px surface gap between segments, which is what lets adjacent fills stay separable when the hues are close. */ --ld-cat-1: #2a78d6; --ld-cat-2: #eb6834; --ld-cat-3: #1baf7a; --ld-cat-4: #eda100; --ld-cat-5: #e87ba4; --ld-cat-6: #008300; --ld-cat-7: #4a3aa7; --ld-cat-8: #e34948; } /* ── Dark base: gray AND black ─────────────────────────────────────────── Both dark themes share this palette; the black block further down restates only what true-black changes. They must BOTH be selectors here — CSS has no inheritance between sibling attribute selectors, so a token defined only under [data-theme="gray"] silently falls back to the LIGHT :root value on a black-theme page. That is how near-black text ended up on near-black surfaces. ───────────────────────────────────────────────────────────────────────── */ html[data-theme="gray"], html[data-theme="black"] { --ld-page-bg: var(--ui-bg, color-mix(in srgb, var(--ld-seed-brand) var(--ld-brand-tint), var(--ld-neutral-21))); --ld-card-bg: color-mix(in srgb, var(--ld-seed-brand) var(--ld-brand-tint), var(--ld-neutral-37)); --ld-card-border: rgba(71, 85, 105, .5); --ld-card-shadow: 0 2px 8px rgba(0, 0, 0, .35); --ld-border: rgba(255, 255, 255, .06); --ld-line: var(--ui-line, #33343a); --ld-divider: rgba(255, 255, 255, .06); --ld-ring: rgba(255, 255, 255, .06); --ld-tile-shadow: none; --ld-stat-bg: rgba(255, 255, 255, .10); --ld-stat-border: rgba(148, 163, 184, .45); --ld-stat-shadow: 0 6px 24px -4px rgba(0, 0, 0, .55); --ld-section-shadow: 0 6px 24px -4px rgba(0, 0, 0, .55); --ld-surface-secondary: rgba(255, 255, 255, .03); --ld-surface-tertiary: rgba(255, 255, 255, .025); --ld-surface-subtle: rgba(255, 255, 255, .02); --ld-surface-accent: rgba(255, 255, 255, .04); --ld-subcard-bg: rgba(255, 255, 255, .03); --ld-subcard-border: rgba(255, 255, 255, .06); --ld-text: #e2e8f0; --ld-text-value: #f1f5f9; --ld-text-secondary: #cbd5e1; --ld-text-muted: #c3cfdf; /* One unit above the slate value: a green-hued brand surface (teal, forest) carries more luminance at the same L than the slate it replaces, and the dim ink measured 4.45-4.48 on that tile. #c1cddc holds 4.5 on every hue. */ --ld-text-dim: #c1cddc; --ld-stat-label: oklch(from var(--ld-seed-brand) max(l, .90) c h); --ld-helper: #c3cfdf; --ld-brand: var(--ld-seed-brand); --ld-brand-strong: color-mix(in srgb, var(--ld-seed-brand) 75%, #000); --ld-brand-stronger: color-mix(in srgb, var(--ld-seed-brand) 62%, #000); /* THE LIT ACCENT. Dark carries a second hue - Signal Sky - for the marks that must read against a dark card: the focus ring, the selected tab and rail item, the tab underline, the chip family (the Blue Split Rule). When a user chooses a brand, that second hue is the brand LIFTED to sky's lightness, not sky: a violet operator's selected rail item is violet, and the ring still clears 3:1 because the L is the one sky measured at. With no brand set every value below is the sky it was. */ --ld-sky: oklch(from var(--ui-brand, #7dd3fc) max(l, .8276) c h); --ld-sky-strong: oklch(from var(--ui-brand, #38bdf8) max(l, .7535) c h); /* Chroma is capped as well as lightness lifted: a saturated violet at L .81 keeps enough blue-channel weight to lose ~.1 of ratio on its own 12% chip fill (4.4). Capped at sky's chroma it clears 4.5. */ --ld-accent-300: oklch(from var(--ui-brand, #93c5fd) max(l, .8091) min(c, .0956) h); --ld-accent-400: oklch(from var(--ui-brand, #60a5fa) max(l, .7137) c h); --ld-focus-border: var(--ld-seed-brand); /* Sky, not brand: the dark themes' seed (#3b82f6) is only 2.80:1 against the card it sits on, which fails the same 3:1 the light ring passes at 4.16. Sky-strong measures 4.82 on gray and 6.97 on black. */ --ld-focus-ring-color: var(--ld-sky-strong); --ld-focus-ring: 0 0 0 2px var(--ld-card-bg), 0 0 0 4px var(--ld-focus-ring-color); --ld-focus-ring-flat: 0 0 0 2px var(--ld-focus-ring-color); --ld-tab-active-bg: rgb(from var(--ld-sky-strong) r g b / .10); --ld-tab-active-border: rgb(from var(--ld-sky-strong) r g b / .25); /* Signal Sky raw measured 4.29 on the tab fill and 3.90 inside the brighter nested frame. Clamped to l=.90, hue preserved. */ --ld-tab-active-text: oklch(from var(--ui-brand, #7dd3fc) max(l, .90) c h); --ld-tab-underline: var(--ld-sky-strong); --ld-tab-nav-bg: rgba(255, 255, 255, .07); --ld-tab-nav-border: rgba(148, 163, 184, .40); --ld-tab-nav-shadow: 0 2px 6px -1px rgba(0, 0, 0, .35); --ld-tab-frame-bg: rgba(255, 255, 255, .04); --ld-tab-frame-border: rgba(148, 163, 184, .30); /* navigation rail — see the light block for why it aliases the tab family. Every value here is inherited from that alias; the rail needs no dark overrides of its own, which is the point of aliasing rather than redeclaring. Listed explicitly so a module retuning the rail has one obvious place to do it. */ --ld-rail-active-bg: var(--ld-tab-active-bg); --ld-rail-active-border: var(--ld-tab-underline); --ld-rail-active-text: var(--ld-tab-active-text); --ld-chip-bg: rgba(255, 255, 255, .04); --ld-chip-border: rgba(255, 255, 255, .10); --ld-chip-text: #e2e8f0; --ld-chip-brand-bg: rgb(from var(--ld-seed-brand) r g b / .12); --ld-chip-brand-border: rgb(from var(--ld-accent-400) r g b / .30); --ld-chip-brand-text: var(--ld-accent-300); --ld-chip-brand-icon: var(--ld-accent-400); --ld-badge-bg: rgba(255, 255, 255, .04); --ld-badge-border: rgba(255, 255, 255, .08); --ld-pill-neutral-bg: rgba(71, 85, 105, .5); --ld-chip-select-bg: rgb(from var(--ld-seed-brand) r g b / .15); --ld-chip-select-text: var(--ld-accent-300); --ld-chip-select-border: rgb(from var(--ld-seed-brand) r g b / .3); --ld-star-active: #fcd34d; --ld-star-muted: #94a3b8; --ld-star-btn-bg: rgba(255, 255, 255, .04); --ld-star-btn-border: rgba(255, 255, 255, .08); --ld-star-on-text: #fbbf24; --ld-table-bg: var(--ld-neutral-37); --ld-table-head-bg: rgba(255, 255, 255, .05); --ld-table-head-border: rgba(255, 255, 255, .06); --ld-table-filter-bg: rgba(255, 255, 255, .03); --ld-table-row-border: rgba(255, 255, 255, .06); --ld-table-row-hover: rgba(255, 255, 255, .04); --ld-table-input-bg: rgba(15, 23, 42, .40); --ld-table-input-border: rgba(255, 255, 255, .10); --ld-action-pill-bg: rgba(255, 255, 255, .04); --ld-action-pill-border: rgba(255, 255, 255, .10); --ld-form-card-bg: var(--ld-neutral-37); --ld-form-card-border: rgba(71, 85, 105, .55); --ld-form-card-shadow: 0 2px 8px rgba(0, 0, 0, .35); /* FILLED inputs on the dark themes (2026-08-26). The field is a lifted surface — a white veil two depth steps above the card — with a hairline edge, instead of a dark well ringed by a .42 white stroke. The stroke had been chosen to clear 3:1 as a boundary; the boundary is now the fill itself, read the way the rest of the platform reads depth (see The Depth Budget). Light keeps its white well and its L .5750 stroke: on a light page the fill would vanish. Focus still draws the ring. */ --ld-input-bg: rgba(255, 255, 255, .07); --ld-input-border: rgba(255, 255, 255, .14); --ld-input-text: #f1f5f9; --ld-input-placeholder: #c1cddc; --ld-form-label: #c3cfdf; --ld-select-bg: var(--ld-neutral-28); --ld-select-border: rgba(148, 163, 184, .25); --ld-select-text: #e2e8f0; --ld-option-checked-bg: var(--ld-neutral-37); --ld-option-checked-text: var(--ld-accent-300); --ld-multi-hover: rgba(255, 255, 255, .06); /* White on the raw seed measured 3.68 on both dark themes — above the 3:1 a graphic owes and under the 4.5 a BUTTON LABEL owes, which is normal text sitting on the fill. Same technique as the selected-tab text: the accent clamped one step deeper, hue kept, so a customer's own brand stays theirs and stays readable. */ --ld-btn-bg: oklch(from var(--ld-seed-brand) min(l, .52) c h); --ld-btn-hover-bg: oklch(from var(--ld-seed-brand) min(l, .45) c h); --ld-btn-hover-bg: var(--ld-brand-strong); --ld-btn-border: var(--ld-brand-strong); --ld-btn-hover-border: var(--ld-brand-stronger); --ld-btn-shadow: 0 1px 3px rgba(0, 0, 0, .3); --ld-btn-ghost-border: rgba(71, 85, 105, .5); --ld-btn-ghost-text: #f1f5f9; --ld-btn-ghost-hover-bg: rgba(255, 255, 255, .08); --ld-success-bg: rgba(16, 185, 129, .08); --ld-success-border: rgba(16, 185, 129, .35); --ld-success-text: #6ee7b7; /* MESH — the fourth semantic family, added 2026-08-22. success/warn/error/brand cover severity; this one is not a severity but a RUNG: a connection that is direct yet travels the network. It is mixed from the two states it sits between (local success, cloud brand) rather than picked, so it stays in the palette when the brand seed changes, and pulled toward the theme's own text colour so it clears the contrast floor in both — the raw mix measured 4.25:1 light and 3.76:1 dark on its own chip; this reads 6.37:1 and 4.67:1. */ --ld-mesh-hue: color-mix(in srgb, var(--ld-success-text) 55%, var(--ld-brand)); --ld-mesh-text: color-mix(in srgb, var(--ld-mesh-hue) 64%, var(--ld-text-value)); --ld-mesh-bg: color-mix(in srgb, var(--ld-mesh-text) 12%, transparent); --ld-mesh-border: color-mix(in srgb, var(--ld-mesh-text) 35%, transparent); --ld-error-bg: rgba(239, 68, 68, .08); --ld-error-border: rgba(239, 68, 68, .35); --ld-error-text: #fdb5b5; --ld-warn-bg: rgba(234, 179, 8, .08); --ld-warn-border: rgba(234, 179, 8, .35); --ld-warn-text: #fde68a; --ld-danger-btn-bg: #b93a2f; --ld-danger-btn-hover-bg-solid: #a1322a; --ld-danger-btn-border: rgba(248, 113, 113, .40); --ld-danger-btn-hover-bg: rgba(248, 113, 113, .14); --ld-backdrop: rgba(0, 0, 0, .55); --ld-glass-bg: rgb(from var(--ld-neutral-26) r g b / .92); --ld-glass-border: rgba(255, 255, 255, .10); --ld-glass-shadow: 0 20px 60px -12px rgba(0, 0, 0, .6); /* Categorical series, dark step. The same eight hues re-stepped for a dark card — not a second palette and not an automatic flip, so slot 3 is the same green identity in every theme and an operator switching themes keeps reading the same series. Both dark themes share these: black restates nothing, because the steps clear 3:1 on the blackout card as well as on the graphite one. */ --ld-cat-1: #3987e5; --ld-cat-2: #d95926; --ld-cat-3: #199e70; --ld-cat-4: #c98500; --ld-cat-5: #d55181; --ld-cat-6: #008300; --ld-cat-7: #9085e9; --ld-cat-8: #e66767; } /* ── Black (true dark) — overrides on top of the gray values ─────────────── */ /* Everything not restated here intentionally inherits the gray token value through the html.dark rule below. */ html.dark:not([data-theme]) { /* safety net: dark pages with no data-theme resolve to the gray palette */ --ld-page-bg: var(--ui-bg, #0F172A); --ld-card-bg: rgb(51, 65, 85); --ld-text: #e2e8f0; } html[data-theme="black"] { --ld-page-bg: var(--ui-bg, #000); --ld-card-bg: color-mix(in srgb, var(--ld-seed-brand) var(--ld-brand-tint), var(--ld-neutral-27k)); --ld-card-border: rgba(255, 255, 255, .10); --ld-line: var(--ui-line, #33343a); --ld-tile-shadow: none; --ld-stat-bg: rgba(255, 255, 255, .07); --ld-stat-border: rgba(255, 255, 255, .11); --ld-stat-shadow: 0 6px 24px -4px rgba(0, 0, 0, .7); --ld-section-shadow: 0 6px 24px -4px rgba(0, 0, 0, .7); --ld-tab-nav-bg: rgba(255, 255, 255, .04); --ld-tab-nav-border: rgba(255, 255, 255, .10); --ld-tab-nav-shadow: 0 2px 6px -1px rgba(0, 0, 0, .50); --ld-tab-frame-bg: rgba(255, 255, 255, .05); --ld-tab-frame-border: rgba(255, 255, 255, .11); --ld-pill-neutral-bg: rgba(255, 255, 255, .08); --ld-table-bg: var(--ld-neutral-27k); --ld-table-head-bg: rgba(255, 255, 255, .07); --ld-table-filter-bg: rgba(255, 255, 255, .05); --ld-form-card-bg: var(--ld-neutral-27k); --ld-form-card-border: rgba(255, 255, 255, .11); --ld-form-card-shadow: 0 2px 12px rgba(0, 0, 0, .6); --ld-input-bg: rgba(255, 255, 255, .08); /* filled, two steps above the blackout card */ --ld-select-bg: #1e1e1e; --ld-select-border: rgba(255, 255, 255, .1); --ld-btn-ghost-border: rgba(255, 255, 255, .12); --ld-glass-bg: rgba(35, 38, 48, .94); } /* ── HIGH CONTRAST (accessibility) ───────────────────────────────────────── html[data-a11y-contrast="high"], set by the accessibility panel. Not a fourth theme: every surface stays what the theme made it, and only the INKS and the BOUNDARIES move to their extremes - text to black or white, secondary inks with it, borders opaque, the input boundary hard, the accent inks clamped one step further, links underlined. The (0,2,0) attribute pair outranks every theme block, black included, without restating a surface. Measured (audit harness, three themes × three brands): every text pair ≥5.3:1 - the weakest is the lifted brand stat label on the dark tile; body text runs 11-19:1 - and every boundary ≥3.2:1. */ html[data-a11y-contrast="high"] { --ld-text: #000; --ld-text-value: #000; --ld-text-secondary: #111; --ld-text-muted: #1a1a1a; --ld-text-dim: #1a1a1a; --ld-helper: #111; --ld-form-label: #111; --ld-input-text: #000; --ld-input-placeholder: #333; --ld-select-text: #000; --ld-stat-label: oklch(from var(--ld-seed-brand) min(l, .36) c h); --ld-tab-active-text: oklch(from var(--ld-seed-brand) min(l, .36) c h); --ld-chip-text: oklch(from var(--ld-seed-brand) .34 min(c, .12) h); --ld-chip-select-text: oklch(from var(--ld-seed-brand) .34 min(c, .18) h); --ld-btn-bg: oklch(from var(--ld-seed-brand) min(l, .42) c h); --ld-btn-hover-bg: oklch(from var(--ld-seed-brand) min(l, .36) c h); --ld-btn-ghost-text: #000; --ld-card-border: #3a4350; --ld-border: #3a4350; --ld-line: #3a4350; --ld-divider: #4b5563; --ld-stat-border: #3a4350; --ld-subcard-border: #3a4350; --ld-table-head-border: #3a4350; --ld-table-row-border: #6b7280; --ld-form-card-border: #3a4350; --ld-input-border: #000; --ld-select-border: #000; --ld-table-input-border: #000; --ld-btn-ghost-border: #000; --ld-tab-nav-border: #3a4350; --ld-tab-frame-border: #3a4350; --ld-focus-ring-color: #000; --ld-glass-border: #3a4350; } html[data-a11y-contrast="high"][data-theme="gray"], html[data-a11y-contrast="high"][data-theme="black"] { --ld-text: #fff; --ld-text-value: #fff; --ld-text-secondary: #f4f4f5; --ld-text-muted: #ececec; --ld-text-dim: #ececec; --ld-helper: #ececec; --ld-form-label: #ececec; --ld-input-text: #fff; --ld-input-placeholder: #d4d4d8; --ld-select-text: #fff; --ld-chip-text: #fff; --ld-stat-label: oklch(from var(--ld-seed-brand) max(l, .95) c h); --ld-tab-active-text: oklch(from var(--ui-brand, #7dd3fc) max(l, .95) c h); --ld-chip-brand-text: oklch(from var(--ui-brand, #93c5fd) max(l, .93) min(c, .0956) h); --ld-chip-select-text: oklch(from var(--ui-brand, #93c5fd) max(l, .93) min(c, .0956) h); --ld-option-checked-text: oklch(from var(--ui-brand, #93c5fd) max(l, .93) min(c, .0956) h); --ld-btn-bg: oklch(from var(--ld-seed-brand) min(l, .48) c h); --ld-btn-hover-bg: oklch(from var(--ld-seed-brand) min(l, .42) c h); --ld-btn-ghost-text: #fff; --ld-card-border: rgba(255, 255, 255, .55); --ld-border: rgba(255, 255, 255, .45); --ld-line: rgba(255, 255, 255, .45); --ld-divider: rgba(255, 255, 255, .40); --ld-stat-border: rgba(255, 255, 255, .60); --ld-subcard-border: rgba(255, 255, 255, .45); --ld-table-head-border: rgba(255, 255, 255, .45); --ld-table-row-border: rgba(255, 255, 255, .35); --ld-form-card-border: rgba(255, 255, 255, .55); --ld-input-border: rgba(255, 255, 255, .85); --ld-select-border: rgba(255, 255, 255, .70); --ld-table-input-border: rgba(255, 255, 255, .70); --ld-btn-ghost-border: rgba(255, 255, 255, .70); --ld-tab-nav-border: rgba(255, 255, 255, .45); --ld-tab-frame-border: rgba(255, 255, 255, .45); --ld-focus-ring-color: #fff; --ld-glass-border: rgba(255, 255, 255, .45); } /* ── THE DARK BAR ───────────────────────────────────────────────────────── The shell's top bar is a dark surface in EVERY theme (see the AWS shell). On a light page its scoped palette re-points the surface tokens to these values — the navy bar, its inks, its select wells, its lit strip. They live here so the two shells consume one source instead of each carrying the hex. Used only inside html[data-theme="light"] [data-topbar] scopes. */ :root { --ld-darkbar-bg: var(--ld-neutral-34); --ld-darkbar-well: var(--ld-neutral-28); /* selects / inputs on the bar */ --ld-darkbar-ink: #e2e8f0; --ld-darkbar-ink-strong: #f1f5f9; --ld-darkbar-ink-secondary: #cbd5e1; --ld-darkbar-ink-muted: #94a3b8; --ld-darkbar-underline: oklch(from var(--ui-brand, #38bdf8) max(l, .7535) c h); /* the active module's lit strip - sky, or the brand lifted to it */ --ld-darkbar-error: #fca5a5; } /* ── Frameless panels ──────────────────────────────────────────────────────── A card, a stat tile, a form panel and a tab frame carry NO edge. Depth is the surface step plus the drop shadow — the Depth Budget already pays for it — and the 1px line drawn on top of that is what read as a light rectangle around every box on the page. The `0 0 0 1px` ring layers that the shadow tokens used to carry were the same border under another name and are gone from the values above; this block finishes the job for the edge tokens. Controls keep their edges. An input, a button, a chip, a pill and a table cell are read by their boundary, and `--ld-input-border` is a measured contrast requirement — none of them are touched here. The rail keeps an edge too: it separates two regions of the shell, which is a divider, not a frame, so it is pinned to the divider ink rather than inheriting the (now transparent) card edge. HIGH CONTRAST IS EXEMPT BY CONSTRUCTION. Every selector below fails when `data-a11y-contrast="high"` is set, so that mode keeps the opaque boundaries it was measured with (>= 3.2:1 on every edge) and an operator who needs edges still gets them. ─────────────────────────────────────────────────────────────────────────── */ html:not([data-a11y-contrast="high"]), html:not([data-a11y-contrast="high"])[data-theme="gray"], html:not([data-a11y-contrast="high"])[data-theme="black"], html:not([data-a11y-contrast="high"])[data-theme="light"] { --ld-card-border: transparent; --ld-stat-border: transparent; --ld-subcard-border: transparent; --ld-form-card-border: transparent; --ld-tab-frame-border: transparent; --ld-rail-border: var(--ld-divider); }