/* ========================================================================== AIM CANONICAL TOKENS — one name per concept -------------------------------------------------------------------------- Load order matters: this file MUST come after theme-definitions.css so it wins. See Pages/Shared/_Layout.cshtml. This is the whole colour vocabulary. Twenty-four names. If a component needs something that is not here, that is a design conversation, not a new token. Origin: 2026-08-05 drift audit. 686 custom properties were defined across theme-definitions.css and aim-consolidated.css; 177 of their names described a surface, 92 a text colour, 57 a border. Nobody can pick consistently from a menu that size, so nobody did. THE TWO RULES THAT KEEP THIS HONEST 1. --brand is a CHROME FILL. It always recedes: darker than the page in both themes. --brand-on is the same identity used as FOREGROUND on a light surface, so it lightens in dark. Never swap them. (CSS11 bans one direction of this; the mirror image is what produced the light navbar in dark mode during the 08-05 review.) 2. A var() fallback is NOT documentation. Never write var(--x, #hex) — if the variable is defined the fallback never fires, and the hex silently becomes a lie. --radius-md was documented as 8px and resolved to 6px across 369 call sites for exactly this reason. ========================================================================== */ :root { /* ── surfaces: four steps, each with one job ───────────────────────────── */ --ground: #DCE6F2; /* page canvas. Blue-tinted, never pure grey. */ --raised: #FFFFFF; /* cards, drawers, panels, table body. */ --anchor: #C4D5E8; /* headers, toolbars, hovers — chrome ON a card. */ --sunken: #EDF3FA; /* zebra stripes, inset fields, wells. */ /* ── ink: three steps ──────────────────────────────────────────────────── */ --ink: #1A1F2E; --ink-muted: #4E6180; /* 6.28:1 on --raised */ --ink-faint: #63758F; /* 4.70:1 on --raised */ /* ── line ──────────────────────────────────────────────────────────────── */ --line: rgba(63, 82, 105, .30); --line-strong: rgba(63, 82, 105, .50); /* ── brand: AIM Steel ──────────────────────────────────────────────────── */ --brand: #3F5269; /* chrome fill — navbar, rail. White 8.01:1 */ --brand-on: #31465E; /* brand as text/icon on a light surface */ --brand-edge: rgba(63, 82, 105, .42); --chrome-hi: #5A6E86; /* active nav/rail — a LIFT of the chrome, 1.53x */ /* ── action ────────────────────────────────────────────────────────────── */ --action: #4378B5; /* fill. White text 4.57:1 */ --action-hover: #3A6799; /* also the on-surface value: 4.65:1 on --ground */ --on-action: #FFFFFF; /* text ON --action. NOT always white — a teal or lime brand needs dark ink here. */ --action-wash: rgba(67, 120, 181, .14); /* ── semantic: state, never accent ─────────────────────────────────────── */ --ok: #15803D; --ok-wash: rgba(21, 128, 61, .12); --warn: #B45309; --warn-wash: rgba(180, 83, 9, .14); --bad: #B91C1C; --bad-wash: rgba(185, 28, 28, .12); --info: #1D4ED8; --info-wash: rgba(29, 78, 216, .12); --idle: #93A3B8; /* ── elevation ─────────────────────────────────────────────────────────── */ --lift-1: 0 1px 2px rgba(26,31,46,.07), 0 2px 8px rgba(26,31,46,.07); --lift-2: 0 2px 6px rgba(26,31,46,.09), 0 4px 14px rgba(26,31,46,.07); --lift-3: 0 10px 30px rgba(26,31,46,.16); } /* ========================================================================== AIM DARK — Dracula. Kept deliberately (James, 2026-08-05): the palette was never the problem, the coverage was. 174 semantic tokens were never redeclared for dark and resolved to their light values. The ladder maps onto Dracula's own steps — Current Line is exactly the "chrome on a card" role that --anchor names. ========================================================================== */ [data-theme="aim-dark"] { --ground: #282A36; /* Dracula Background */ --raised: #343746; --anchor: #44475A; /* Dracula Current Line */ --sunken: #21222C; --ink: #F8F8F2; /* Dracula Foreground */ --ink-muted: #A2AAC8; /* 4.93:1 on --raised */ --ink-faint: #8A97C4; --line: rgba(248, 248, 242, .13); --line-strong: rgba(248, 248, 242, .26); --brand: #20222C; /* chrome RECEDES below --ground. White 15.8:1 */ --brand-on: #9DB2CC; --brand-edge: rgba(157, 178, 204, .42); --chrome-hi: #3A3D4D; /* OPEN DECISION (2026-08-05): Dracula Purple keeps the action in a different hue family from light-mode blue, which means a component reviewed only in light has not really been reviewed. #8FB3E8 — the light blue, lightened — would give one family across both and sits at 5.49:1 on --raised. Purple is Dracula's signature, so this is taste. Decide and record it here. */ --action: #BD93F9; --action-hover: #D3B4FF; --on-action: #21222C; /* dark ink on the bright purple */ --action-wash: rgba(189, 147, 249, .16); --ok: #50FA7B; --ok-wash: rgba(80, 250, 123, .14); --warn: #FFB86C; --warn-wash: rgba(255, 184, 108, .15); --bad: #FF5555; --bad-wash: rgba(255, 85, 85, .15); --info: #8BE9FD; --info-wash: rgba(139, 233, 253, .14); --idle: #6272A4; /* Dracula Comment */ --lift-1: 0 1px 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35); --lift-2: 0 2px 6px rgba(0,0,0,.48), 0 4px 14px rgba(0,0,0,.38); --lift-3: 0 10px 30px rgba(0,0,0,.55); } /* ========================================================================== CORNERSTONE — the white-label proof. The audit found cornerstone-light overriding 30 of 603 tokens and expecting a re-theme. It cannot work that way: a custom property resolves where it is DECLARED, so overriding a seed on a descendant cannot re-resolve tokens :root already computed. Every derived value has to be restated. That is what these blocks do, and it is why the canonical set is kept small enough to. ========================================================================== */ [data-theme="cornerstone-light"] { --ground: #D8E6EA; --raised: #FFFFFF; --anchor: #BCD5DC; --sunken: #EAF3F5; --ink: #0C2027; --ink-muted: #3D5F68; --ink-faint: #5C7D86; --line: rgba(0, 62, 82, .28); --line-strong: rgba(0, 62, 82, .48); --brand: #003E52; /* chrome. White 11.4:1 */ --brand-on: #00566F; --brand-edge: rgba(0, 86, 111, .45); --chrome-hi: #1D6076; --action: #00566F; --action-hover: #003E52; --on-action: #FFFFFF; --action-wash: rgba(0, 86, 111, .14); } [data-theme="cornerstone-dark"] { --ground: #101F24; --raised: #182B31; --anchor: #223C44; --sunken: #0C181C; --ink: #E8F0F2; --ink-muted: #9FBBC3; --ink-faint: #7FA0A9; --line: rgba(232, 240, 242, .14); --line-strong: rgba(232, 240, 242, .28); --brand: #0A181D; /* recedes below --ground */ --brand-on: #7FB8CC; --brand-edge: rgba(127, 184, 204, .45); --chrome-hi: #24424B; --action: #7FB8CC; --action-hover: #A3CEDD; --on-action: #0C181C; --action-wash: rgba(127, 184, 204, .16); --ok: #4ADE80; --ok-wash: rgba(74, 222, 128, .13); --warn: #FBBF24; --warn-wash: rgba(251, 191, 36, .14); --bad: #F87171; --bad-wash: rgba(248, 113, 113, .13); --info: #7DD3FC; --info-wash: rgba(125, 211, 252, .13); --idle: #64808A; } /* ========================================================================== CHROME OPTIONS — Steel (active) · Arsenic · Phantom The chrome SURFACE is selectable; the brand IDENTITY is not. AIM Steel is the brand (James, 2026-08-05), so --brand-on stays steel in all three — it is the identity used as foreground on a light surface. What changes is --brand, the fill behind the navbar and rail, and --chrome-hi, the lift that marks the active tab and rail slot. STEEL IS THE FIRST COLLAPSE. Arsenic and Phantom are defined and measured but NOT applied — nothing sets data-chrome yet. When they land, the surfaces they touch are the navbar, the rail and the secondary button, which takes its border from --brand-edge. The highlight is a LIFT of its own chrome, never the accent, so the action colour never has to compete with navigation. The step is deliberately the same size in all three, which is the property worth holding rather than the hex: a client brand only has to supply a chrome, not a matched pair. Steel #3F5269 -> #5A6E86 white 5.24:1 on the lift 1.53x Arsenic #3B3F44 -> #5B5F64 white 6.43:1 1.65x Phantom #1E2126 -> #3B3F44 white 10.60:1 1.52x ========================================================================== */ [data-chrome="arsenic"] { --brand: #3B3F44; /* white 10.60:1 */ --chrome-hi: #5B5F64; /* white 6.43:1 */ --brand-edge: rgba(59, 63, 68, .42); } [data-chrome="phantom"] { --brand: #1E2126; /* white 16.14:1 */ --chrome-hi: #3B3F44; /* white 10.60:1 */ --brand-edge: rgba(30, 33, 38, .42); } /* Dark: chrome still RECEDES below --ground, so each option darkens rather than lightening. Getting this backwards is what produced the pale navbar in the 2026-08-05 review — see the two rules at the top of this file. */ [data-theme="aim-dark"][data-chrome="arsenic"], [data-theme="aim-dark"] [data-chrome="arsenic"] { --brand: #141619; --chrome-hi: #31363C; --brand-edge: rgba(237, 240, 243, .28); } [data-theme="aim-dark"][data-chrome="phantom"], [data-theme="aim-dark"] [data-chrome="phantom"] { --brand: #0E1013; --chrome-hi: #282C31; --brand-edge: rgba(237, 240, 243, .28); } /* ========================================================================== ESTATE BRAND HOOK INSCOPE 360 RUNS ON AIM STEEL (James, 2026-08-05). The teal was explored and dropped — Inscope takes the standard palette above and the standard blue button. Only the MARK differs. So there is deliberately no [data-estate-brand="inscope"] block: an estate that shares the palette must not carry an override that does nothing, because a no-op override is indistinguishable from a broken one. Logo handling for Inscope, which is the only thing that varies: - the Viewport mark holds down to 20px; use it alone in the rail, the avatar slot and the favicon - the wordmark cannot go small. Its ink is 398x25 (15.9:1) and it is tracked ~1.8x normal, so 11px caps need 174px of width. Lockup only where that width genuinely exists; never in the rail - ship ONE file with fill="currentColor". The supplied black and reversed SVGs are byte-identical geometry and differ only in fill, so two files is two things that can drift - crop the wordmark viewBox to "43.2 48.2 397.9 25.1". As supplied the box is 4.8x taller than the artwork, so height="17" renders 3.5px letters WHEN A CLIENT DOES BRING A COLOUR They supply ONE seed and we derive the rest. Do not accept a request for sixty hand-picked values, and do not accept the seed alone either — one value cannot do every job. The dropped Inscope teal is the clearest worked example of why: seed #34B59E -> white on it is 2.55:1, so it can be neither chrome nor a white-text button. It is an accent that needs dark ink. Derived: accent #34B59E (dark ink 6.71:1) hover #23A08A on-surf #157A68 (white 5.23:1 — text, links, icons) chrome #14685A (white 6.65:1 — navbar, rail) Apply on a wrapper that redeclares EVERY derived token, not just the seed — see the Cornerstone blocks above for why. Also check the seed against the SEMANTIC colours, not just the surfaces. A green accent within ~25 degrees of --ok reads as "Complete": a brand button sitting next to a status chip of the same hue is genuinely ambiguous. The teal sat 27 degrees off and was already borderline. ========================================================================== */