/* =========================================================================== CRUXMS Design System — tokens.css THE one home for every colour, type, space, radius and elevation value used by any CRUXMS product (SM / TM / Learning / ME / IB / AC). ── The rule this file exists to enforce ────────────────────────────────── A design value is a fact. "One real thing, one home" applies to facts about colour exactly as it applies to facts about a student. Change a value HERE, run sync.js, and every product picks it up. Never re-type a hex anywhere else — a copy is drift waiting to happen. ── Do not edit a vendored copy ─────────────────────────────────────────── If you are reading this inside an app's vendor/cruxms-design/ directory, this is a COPY. Edit the source at /opt/adventureworks-dev/cruxms-design, commit, then re-run sync.js. sync.js refuses to overwrite a locally-edited copy and will name the file you changed. v1.1 values, carried verbatim from the reviewed design system. The reasoning behind each choice (why 5 module accents not 8, why --text-faint is darker than it looks like it should be, why --border-2 exists separately from --border) lives in the cruxms-product-design skill's guidelines/ — read it before changing a value, not after. ── Dark theme ─────────────────────────────────────────────────────────── Deliberately NOT defined here yet. Calibr has a live dark toggle whose values live in its own theme.css, and that keeps working unchanged when an app adopts this file. Whether dark becomes a shared, token-level concern is an open decision — see ADOPTION.md. =========================================================================== */ :root { color-scheme: light; /* ── Neutrals ─────────────────────────────────────────────────────────── */ --ink: #0E1B26; --stone-brand: #6E7D89; /* brand Stone verbatim — large/print/decorative ONLY. Not an accessible UI text colour at 13px. */ --chalk: #F4F6F7; --bg: #F4F6F7; --surface: #FFFFFF; --surface-sunk: #EEF1F3; --border: #E2E6ED; /* hairline dividers — decorative, NOT a control boundary */ --border-2: #8E9BAA; /* control borders (inputs, selects) — meets WCAG 1.4.11 3:1; --border does not */ --text: #0E1B26; --text-muted: #64717D; /* 5.00:1 on white */ --text-faint: #5E6B76; /* 5.47:1 on white — used on table headers. Do not lighten without re-checking contrast. */ /* ── Primary + semantic ───────────────────────────────────────────────── */ --primary: #2563EB; --primary-d: #1D4ED8; --primary-pale: #EAF1FE; --focus-ring: rgba(37,99,235,.45); --success: #0E7C3F; --success-pale: #E7F6ED; --success-deep: #0F3D25; /* solid success SURFACE (toast) — dark enough to carry white text */ --success-bright: #3BD97A; /* success indicator ON a dark surface — --success is too dark to read there */ --warning: #A25300; --warning-pale: #FCF0DE; --danger: #C0271B; --danger-pale: #FCEAE8; --info: #0B6FA8; --info-pale: #E7F3FA; --neutral-text: #57646F; /* ── Module accents — five, each measured to clear ΔE 6+ from every other accent, from --primary, and from every semantic state. Cross-cutting features (Scheduling, Intake) deliberately get NO hue. ──────────────── */ --tm: #5B2FB8; --tm-pale: #F0EBFB; /* Tertiary Manager */ /* Violet ramp — same job as the wine ramp below, added 2026-09-22 when tertiary moderation moved out of Standards Management into its own Tertiary Manager module and needed its own hero-gradient/module-chrome darker shades (it had only the base + pale pair before). Derived by HSL lightness ratio from --tm's base, using the exact same ratios --sm-mid/--sm-deep already use relative to --sm (0.744 / 0.429) — same hue, same darkening relationship, not eyeballed. */ --tm-mid: #43218B; --tm-deep: #26134D; --sm: #8E1A47; --sm-pale: #F7E7ED; /* Standards Manager — wine, clears the semantic danger red */ /* Wine ramp — the darker companions a hero gradient / module chrome needs. Added so Calibr's hardcoded crimson family (#BE123C → #7f1d1d → #450a0a, scattered across header.ejs and theme-module.css) has a token equivalent to point at. Crimson was measured at ΔE 4.2 from the semantic danger red — too close to tell apart; wine is ΔE 10.8. See cruxms-product-design/guidelines/module-accent-map.md. */ --sm-mid: #6B1235; --sm-deep: #3E0A1F; --learning: #0B6B66; --learning-pale: #E2F2F0; /* Learning (LX + LD) */ --me: #C2137A; --me-pale: #FBE7F1; /* Marketing Engine */ --ib: #42505E; --ib-pale: #EAEDF0; /* Intelligent Business + AC — a NEUTRAL by design, not a hue */ /* ── Lifecycle stages — WHERE a record is in its journey, never a judgement. Deliberately a SEPARATE vocabulary from the semantic states above: --success answers "is this good?", a stage answers "how far along is this?". A record can be Inactive without anything being wrong, and Active is not an achievement. These values are LIFTED from Calibr's live .status-pill set, not redesigned — staff already read them daily and the point of this file is to give those 34 hardcoded hex literals one home, not to restyle the SMS. Three defects were fixed in the lift, and only three: - unset was #9CA3AF on #F3F4F6 = 2.31:1, below WCAG AA and genuinely hard to read. Darkened to 4.90:1. - completed was byte-identical to admission (#5B21B6/#EDE9FE) — two different meanings rendering the same. Given its own terminal plum. - published dropped entirely. It is a judgement, not a stage; use .badge-success. Everything else is the live value, unchanged. ──────────────────────────────── */ --stage-enquiry: #1E40AF; --stage-enquiry-bg: #DBEAFE; --stage-validated: #115E59; --stage-validated-bg: #CCFBF1; --stage-waitlist: #3730A3; --stage-waitlist-bg: #E0E7FF; --stage-admission: #5B21B6; --stage-admission-bg: #EDE9FE; --stage-enrolled: #065F46; --stage-enrolled-bg: #D1FAE5; --stage-active: #065F46; --stage-active-bg: #F0FDF4; --stage-active-line: #059669; --stage-completed: #553C6B; --stage-completed-bg: #EFEAF4; --stage-inactive: #4B5563; --stage-inactive-bg: #E5E7EB; --stage-draft: #475569; --stage-draft-bg: #F1F5F9; --stage-unset: #636B76; --stage-unset-bg: #F3F4F6; /* ── Elevation ────────────────────────────────────────────────────────── */ --shadow-1: 0 1px 2px rgba(14,27,38,.07), 0 1px 1px rgba(14,27,38,.04); --shadow-2: 0 6px 16px rgba(14,27,38,.09), 0 2px 6px rgba(14,27,38,.05); --shadow-3: 0 20px 40px rgba(14,27,38,.14), 0 6px 12px rgba(14,27,38,.06); /* ── Radius ───────────────────────────────────────────────────────────── */ --r-sm: 6px; --r-md: 8px; --r-lg: 16px; --r-full: 999px; /* ── Spacing — 4px base, 8px rhythm ───────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Density variant — override at a shell root with [data-density="compact"], never per page */ --row-pad: 11px; /* ── Motion ───────────────────────────────────────────────────────────── */ --motion-fast: 0.15s ease; --motion-base: 0.2s ease; --motion-slow: 0.3s ease; /* ── Type scale — px, so the label and the render cannot drift apart ───── */ --fs-display: 32px; --lh-display: 1.1; --ls-display: -0.022em; --fs-h1: 24px; --lh-h1: 1.25; --ls-h1: -0.012em; --fs-h2: 18px; --lh-h2: 1.35; --ls-h2: -0.005em; --fs-body: 16px; --lh-body: 1.6; --fs-caption: 13px; --lh-caption: 1.5; --fs-label: 11px; --lh-label: 1.4; --ls-label: 0.14em; --fs-data: 13px; --lh-data: 1.5; /* TYPEFACE — currently Inter, which is what every product actually renders today. The designed target is Archivo (display) + IBM Plex Sans (body) + IBM Plex Mono (data); `typography.css` implements it and no product loads that file yet. Switching is deliberately a separate, reviewed decision, not a side effect of adopting tokens: it is the single largest visual change in the system, it touches every screen at once, and folding it into a token migration would make every other delta impossible to judge. When it is taken, it is a one-line change here plus linking `typography.css` — which is the system working exactly as intended. See ADOPTION.md "Open decisions". */ --font-head: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace; /* The designed faces, kept addressable so typography.css and any preview can use them without re-typing the stacks. Not referenced by --font-body yet. */ --font-head-target: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; /* >=20px, weights 700/800 only */ --font-body-target: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono-target: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; /* ── Shell chrome ─────────────────────────────────────────────────────── */ /* The suite shell is the one surface every product shares, so its values are canonical here rather than per-product. Carried from the live Calibr shell, which is the proven implementation. */ --shell-bar: #1E2327; /* top navbar */ --shell-nav: #0F1E35; /* left sidebar */ --sidebar-w: 242px; --topbar-h: 52px; } /* =========================================================================== COMPATIBILITY ALIASES Names the existing codebase already reads, pointed at their canonical token above. These introduce NO new values — every one is a `var()` reference, which is the whole point: an alias cannot drift from what it aliases. They exist so an app can adopt this file without a rewrite. As each legacy name is retired from the views, delete its line here. When a line has no remaining consumers, removing it is a pure no-op. Four of these names (--surface-alt, --surface-2, --bg-subtle, --border-light) are read by the live Calibr CSS but were never defined anywhere — roughly 50 declarations that silently do nothing today. Giving them a home here is the fix, not a new feature. =========================================================================== */ :root { --secondary: var(--shell-bar); --sidebar: var(--shell-nav); --card-bg: var(--surface); --surface-alt: var(--surface-sunk); --surface-2: var(--surface-sunk); --bg-subtle: var(--surface-sunk); --border-light: #EDF0F4; /* one step lighter than --border; the only genuinely new value in this block */ --muted: var(--text-muted); --radius: var(--r-md); --radius-sm: var(--r-sm); --card-shadow: var(--shadow-1); --font: var(--font-body); }