/*Default variables*/ :root { /* Colors from the Figma mockup */ --primary-50: #c8d8fe; --primary-400: #0355f6; --primary-dark-400: #5682c9; --primary-dark-500: #275298; --primary-dark-800: #091933; --primary-light-400: #cdedff; --primary-light-100: #f3fbff; --primary-light-200: #e9f7ff; --default-20: #fbfcfd; --default-30: #f7f8f9; --default-40: #f3f5f7; --default-50: #dfe5eb; --default-60: #a09fa6; --default-80: #4A5768; --default-90: #504f57; --yellow-400: #e3ff66; --error-100: #ffe6e0; --error-300: #d42723; --success-50: #e9f5eb; --success-200: #85dc8d; --success-300: #19af27; --success-400: #00810c; /* Colors (there is a Colors.js constants file for any colors that are needed directly in the code) */ --white: white; /*white could be off-white at some point*/ --off-white: rgb(248, 248, 248); --black: black; --primary: var(--primary-400); --primary-dark: var(--primary-dark-400); --primary-light: var(--primary-light-400); /* code from the style guide */ /*--primary: #2D31FA;*/ /* more muted version*/ --yellow: var(--yellow-400); --red: var(--error-300); --default-panel-background: var(--default-30); --link: var(--primary-dark); --bg-light: var(--default-30); --bg-default: var(--default-50); --bg-primary: var(--primary-50); --border-color: #dce4eb; --light-border-color: var(--default-40); --panel-border-color: rgba(15, 99, 168, 0.1); /*???? delete?*/ --gray: var(--default-60); --light-gray: var(--default-40); --default-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1); --darker-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3); --left-nav-color: var(--primary-dark); --left-nav-active-color: var(--primary-light-200); --button-box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1); --button-hover-box-shadow: 0 2px 0 0 rgba(0, 0, 0, .1); /*--button-box-shadow-lg: 4px 4px 5px 0 rgba(0, 0, 0, .175);*/ /*--button-hover-box-shadow-lg: 2px 2px 5px 0 rgba(0, 0, 0, .175);*/ --button-box-shadow-lg: 0 2px 0 0 rgba(0, 0, 0, .1); --button-hover-box-shadow-lg: 0 4px 0 0 rgba(0, 0, 0, .1); /*--button-box-shadow-xl: 4px 4px 5px 0 rgba(0, 0, 0, .2);*/ /*--button-hover-box-shadow-xl: 2px 2px 5px 0 rgba(0, 0, 0, .2);*/ --button-box-shadow-xl: none; --button-hover-box-shadow-xl: none; --dark-text-color: #1a2d4f; --default-text-color: rgb(25, 29, 31); --light-text-color: var(--default-60); --default-hover-color: #fafafa; --success-hover: rgba(32, 152, 32, 0.1); --alert: #f5bf35; --warn: #DB642A; --danger: var(--error-300); --bg-danger: var(--error-100); --success: var(--success-300); --bg-success: var(--success-50); --font-size-sm: .8rem; --font-size-xs: .6rem; --font-size-md: 1rem; --font-size-lg: 1.2rem; --font-size-xl: 1.6rem; --font-size-xxl: 2rem; --font-weight-light: 200; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 600; /*Button Colors*/ --button-primary: var(--primary-dark-800); --button-default: var(--white); --button-default-hover: var(--light-gray); --button-danger: var(--danger); --button-success: var(--success); /*Status Backgrounds */ --bg-status-default: #eef0f2; --bg-status-success: var(--success-50); --bg-status-error: var(--error-100); --text-status-default: var(--default-text-color); --text-status-success: var(--success); --text-status-error: var(--error-300); /* margins: the design system's spacing scale. Ours were rem values that landed on 3.2 / 8 / 11.2 / 16 / 24 / 40 / 64px; the scale is 4 / 8 / 12 / 16 / 24 / 40 / 64, so only xs and md move at all, and both by under a pixel. */ --margin-xs: var(--space-xs); /* 4px · was .2rem (3.2px) */ --margin-sm: var(--space-sm); /* 8px · was .5rem (8px) ✅ */ --margin-md: var(--space-md); /* 12px · was .7rem (11.2px) */ --margin-lg: var(--space-lg); /* 16px · was 1rem (16px) ✅ */ --margin-xl: var(--space-xl); /* 24px · was 1.5rem (24px) ✅ */ --margin-xxl: var(--size-40); /* 40px · was 2.5rem (40px) ✅ */ --margin-mega: var(--space-4xl); /* 64px · was 4rem (64px) ✅ */ /* padding — the same scale. Ours landed on 4.8 / 9.6 / 12.8 / 16 / 24 / 40px. */ --padding-xs: var(--space-xs); /* 4px · was .3rem (4.8px) */ --padding-sm: var(--space-sm); /* 8px · was .6rem (9.6px) */ --padding-md: var(--space-md); /* 12px · was .8rem (12.8px) */ --padding-lg: var(--space-lg); /* 16px · was 1rem (16px) ✅ */ --padding-xl: var(--space-xl); /* 24px · was 1.5rem (24px) ✅ */ --padding-mega: var(--size-40); /* 40px · was 2.5rem (40px) ✅ */ --box-padding-input: .6rem 1rem; --button-md-padding: .5rem 1rem; /* border-radius: the legacy scale, repointed at the design system. The 7px and 10px steps were off any scale; the system's are 4 / 8 / 12 with a real pill token. */ --border-radius-sm: var(--radius-ds-sm); /* 4px ✅ */ --border-radius-md: var(--radius-ds-md); /* 8px · was 7px */ --border-radius-lg: var(--radius-ds-lg); /* 12px · was 10px */ --border-radius-round: var(--radius-ds-full); /* 9999px · was 2em */ /*main component sizes*/ --nav-width: 250px; --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --chart-color-1: #1AA7F1; --chart-color-2: #7FD1FC; --chart-color-3: #0291DC; --chart-color-4: #06245D; --chart-color-5: #003499; /* ========================================================================== FIGMA SYNC — Relay Design System Source: Figma "Relay-Remix-2026" (b9cXASvKFBzKfOVYHlMhyg), variables read from the Cases/All, Case Details and Deactivate-Referrals frames. These variables already existed in Figma but had never been ported to CSS, so components hardcoded the hex values instead: #212934 appears 48 times across web/src and #6E7A8A 43 times. Both are named tokens below. ADDITIVE ONLY. Nothing above this line is changed, so no existing rule shifts. New work should use these; migration of the ~320 existing literals is a separate pass. ========================================================================== */ /* -- Neutral ramp — Figma neutrals/* -------------------------------------- */ --neutral-10: #FFFFFF; /* neutrals/10 */ --neutral-30: #F8F9FA; /* neutrals/30 (NB: --default-30 is #f7f8f9 — drifted) */ --neutral-40: #F3F5F7; /* neutrals/40 == --default-40 */ --neutral-50: #DFE5EB; /* neutrals/50 == --default-50 · 13 literal uses */ --neutral-60: #A0ADBA; /* neutrals/60 · 8 literal uses NB: --default-60 is #a09fa6 — hue 249deg vs this ramp's 214deg. The Figma value is the on-family one. Not changed here; that shifts live UI. Open design question, no owner outside this repo. */ --neutral-70: #6E7A8A; /* neutrals/70 · 43 literal uses <-- text-secondary */ --neutral-80: #4A5768; /* neutrals/80 == --default-80 */ --neutral-100: #212934; /* neutrals/100 · 48 literal uses <-- text-primary */ /* -- Semantic text — the pair the codebase has been hardcoding ------------ */ --text-primary: var(--neutral-100); /* 🔴 C-42 FIXED 2026-08-07. Was var(--neutral-70) = #6E7A8A, which measures 4.36:1 on white and misses AA's 4.5:1 for normal text — across 43 literal uses on unaudited surfaces. The RAW ramp above keeps the Figma value, because neutrals/70 really is #6E7A8A and this file's job is to be faithful about that; it is the SEMANTIC name that must be legible. The design system's neutral-600 is 6.32:1 and is the same token --text-muted now uses. */ --text-secondary: var(--color-neutral-600); /* was #6E7A8A, 4.36:1 → 6.32:1 */ --text-display: #111315; /* typography/colors/display + /body */ /* -- Borders -------------------------------------------------------------- */ --border-default: #cbcfd6; /* Borders/Default */ /* -- Brand blues — Figma dark-blue/*, blue/*, light-blue/* ----------------- */ --blue-600: #0047D0; /* blue/600 — not previously in CSS */ --dark-blue-500: #275298; /* == --primary-dark-500 */ --dark-blue-800: #091933; /* == --primary-dark-800 · 8 literal uses */ --light-blue-800: #1AA7F1; /* == --chart-color-1 */ /* -- Feedback — Figma feedback/* ------------------------------------------ */ --feedback-success-300: #19AF27; /* == --success-300 */ --feedback-error-300: #D42723; /* == --error-300 */ /* -- Type scale — Figma relay/heading/* and relay/body/* ------------------ All DM Sans. Figma expresses these in px; they are written here in rem so they still honour a reader's browser font-size setting. At the default 16px root they compute to exactly the Figma values. These are the sizes the product is actually built from — 14px appears 53 times in the SCSS, 16px 32 times, 12px 31 — none of which had a token before. The legacy --font-size-* scale above is untouched. */ /* ---- type: the design system's scale, mapped by ROLE and expressed in rem --- 🔴 Two deliberate choices, both of which "align entirely" survives. 1. MAPPED UP A RUNG, NOT ACROSS BY NAME. The system's scale is 11/13/16/19/23/28 against our 12/14/16/18/22/26, so taking its rungs by matching name would have made 55 of 74 type declarations SMALLER, 38 of them at the 12px tier going to 11px. The people in this product all day are commonly 40+ and there is a 16px floor decision already on the board. Mapping by role instead raises the small end. No bespoke number survives: every value below comes from the system. Its own semantic styles agree: --text-body-md-size is 16px, so 16px IS the system's answer for body text, and the rung names were never the intent. 2. EXPRESSED IN rem. The source file is px throughout. Ours was written in rem on purpose so a reader who raises their browser font size gets larger text; px freezes that. The values are identical at a 16px root, so this is the system's scale without giving up the scaling. ---------------------------------------------------------------------- */ --type-2xs: 0.8125rem; /* 13px · --text-label-md / body-sm · was 12px */ --type-xs: 1rem; /* 16px · --text-body-md, the body default · was 14px */ --type-sm: 1rem; /* 16px · --text-body-md · unchanged */ --type-md: 1.1875rem; /* 19px · --text-label-xl / h5 · was 18px */ --type-lg: 1.4375rem; /* 23px · --text-label-2xl / h4 · was 22px */ --type-xl: 1.75rem; /* 28px · --text-h3 · was 26px */ /* The system's weights, exactly. */ --type-weight-regular: 400; /* --font-weight-regular */ --type-weight-medium: 500; /* --font-weight-medium */ --type-weight-semibold: 600; /* --font-weight-semibold */ --type-weight-bold: 700; /* --font-weight-bold */ /* Line-heights, as ratios. The system ships them as px pinned to each text style (body-md 16/24 = 1.5, label-md 13/17.875 = 1.375, h3 28/38.5 = 1.375); as ratios they survive the rem conversion above. */ --type-leading-tight: 1.25; /* h1 40/50 */ --type-leading-snug: 1.375; /* label-md, h2-h6 */ --type-leading-normal: 1.5; /* body-md 16/24 */ /* -- Spacing / sizing ----------------------------------------------------- */ --icon-sm: 12px; /* Button/Sizing/Icon/Small */ /* -- Elevation ------------------------------------------------------------ */ --shadow-xs: 0 1px 2px 0 #1018280D; /* Shadow/xs */ /* ========================================================================== APP SHELL — Kandula facelift Surface, elevation and sidebar treatment. This is the layer that carries most of the perceived quality: content sitting on an off-white page as elevated white cards, against a dark navigation rail. Values derive from the Kandula brand core (Night #162930 / Calming Blue Grey #C9D5D9) rather than the Relay blue. Everything here is a token, so the whole look can be retuned by editing this file and refreshing — no rebuild, because this file is served by Django, not bundled by webpack. ========================================================================== */ /* ========================================================================== THE KANDULA DESIGN SYSTEM: the source of colour from 2026-08-07. Generated from the Kandula Figma file's Variables collections, so this file and the Figma sit on one source. This block was copied in rather than authored here, so treat a change to it as a change to the system: say why in the comment, because there is no upstream to re-copy from that would overwrite it back. 🔴 WHAT THE SYSTEM SUPPLIES, corrected 2026-08-07 by reading the source rather than the prototype. The first version of this comment said "colour, radius, font family; no type scale and no spacing scale." That was wrong, and it was inferred from what dashboard-frame.html happened to consume. The source defines 292 tokens in the light theme: --color-* 170 --text-* 51 (h1-h6, body, label, caption, code, --space-* 23 --size-* 17 each with size / weight / line-height) --font-* 16 --radius-* 11 --border-* 4 shadows 0 (the one real gap) So there IS a type scale (11/13/16/19/23/28/33/40/48/57px) and a spacing scale (4/8/12/16/24/32/48/64 plus gap / inset / layout semantics). Only COLOUR and RADIUS are taken here. Reconciling --type-* and --margin-* / --padding-* against the system is a second pass and a bigger one: its 13px sits where ours has 12 and 14, and its 19px where ours has 18, so it moves live type rather than renaming it. Not done unasked. ⚠️ It also ships a DARK THEME, 54 semantic overrides under [data-theme='dark']. Nothing in Kandula requests it and nobody has asked for one, but it is why the mapping below points at SEMANTIC names (--color-bg-surface, --color-fg-muted) wherever it can rather than at raw ramp steps: on the semantic layer a theme switch would mostly just work. The handful that point at raw steps are marked, and each would need its own dark value first. The two brand anchors match hex for hex — night-900 is #162930 and blue-grey-200 is #C9D5D9 — which is the strongest evidence that the rebrand and the system were built from the same source. ========================================================================== */ --color-base-white: #ffffff; --color-neutral-50: #f6f7f8; --color-neutral-100: #e8ebed; --color-neutral-200: #d5d9dd; --color-neutral-300: #b9bfc6; --color-neutral-400: #98a1a9; --color-neutral-500: #75808a; --color-neutral-600: #596169; --color-neutral-700: #41474e; --color-neutral-800: #2e3338; --color-neutral-900: #1e2125; --color-night-200: #aad1df; --color-night-400: #5099b4; --color-night-700: #223f49; --color-night-800: #1a3038; --color-night-900: #162930; --color-night-950: #0e1b1f; --color-blue-grey-200: #c9d5d9; --color-blue-grey-500: #6694a3; --color-blue-grey-700: #385e6b; --color-info-50: #f0f9ff; --color-info-200: #aadcfd; --color-info-300: #72c2f8; --color-info-500: #1a88d1; --color-info-600: #196ca4; --color-error-50: #fff0f0; --color-error-200: #febbb8; --color-error-500: #f1160e; --color-error-600: #bc1610; --color-error-700: #8a130f; --color-warning-400: #fbb62d; --color-orange-400: #f97f39; --color-purple-400: #9f61e5; --color-success-500: #27a577; --color-success-700: #146748; /* Semantic: the system's names, the system's values */ --color-bg-canvas: var(--color-neutral-50); --color-bg-surface: var(--color-base-white); --color-bg-surface-sunken: var(--color-neutral-100); --color-fg-default: var(--color-neutral-900); --color-fg-muted: var(--color-neutral-700); --color-fg-subtle: var(--color-neutral-500); --color-fg-link: var(--color-info-600); --color-border-default: var(--color-neutral-200); --color-border-strong: var(--color-neutral-300); --color-border-focus: var(--color-night-400); /* ---- the non-colour collections, verbatim ------------------------------ Spacing, Radius, Border width, Typography. Brought across 2026-08-07 when the goal became aligning entirely rather than on colour alone. 🔑 THE -ds- INFIX IS THE COLLISION RULE, and it is not decorative. Where an imported scale uses a name the app already owns, the import takes -ds- and the app keeps the bare name. Radius and border did this from the start. Type and weight did NOT, and six names (--font-size-xs/sm/lg/xl, --font-weight-medium and --font-weight-bold) silently shadowed the legacy scale in the same :root, where last-one-wins reassigned them for ~28 consumers on screens this work never opened. Corrected 2026-08-18: the whole imported font group carries -ds- and nothing here shadows an app name. Anything added below follows the rule. */ --size-0: 0px; --size-1: 1px; --size-2: 2px; --size-4: 4px; --size-8: 8px; --size-12: 12px; --size-16: 16px; --size-20: 20px; --size-24: 24px; --size-32: 32px; --size-40: 40px; --size-48: 48px; --size-56: 56px; --size-64: 64px; --size-80: 80px; --size-96: 96px; --size-full: 9999px; --space-xs: var(--size-4); --space-sm: var(--size-8); --space-md: var(--size-12); --space-lg: var(--size-16); --space-xl: var(--size-24); --space-2xl: var(--size-32); --space-3xl: var(--size-48); --space-4xl: var(--size-64); --space-inset-xs: var(--size-4); --space-inset-sm: var(--size-8); --space-inset-md: var(--size-12); --space-inset-lg: var(--size-16); --space-inset-xl: var(--size-24); --space-inset-2xl: var(--size-40); --space-gap-xs: var(--size-4); --space-gap-sm: var(--size-8); --space-gap-md: var(--size-12); --space-gap-lg: var(--size-16); --space-gap-xl: var(--size-24); --space-layout-sm: var(--size-24); --space-layout-md: var(--size-32); --space-layout-lg: var(--size-48); --space-layout-xl: var(--size-64); --radius-ds-none: 0px; --radius-ds-sm: 4px; --radius-ds-md: 8px; --radius-ds-lg: 12px; --radius-ds-xl: 16px; --radius-ds-2xl: 24px; --radius-ds-3xl: 32px; --radius-ds-full: 9999px; --radius-ds-control: var(--radius-ds-md); --radius-ds-card: var(--radius-ds-lg); --radius-ds-pill: var(--radius-ds-full); --border-width-none: 0px; --border-width-hairline: 1px; --border-width-thin: 2px; --border-width-thick: 4px; --font-family-ds-default: 'DM Sans', system-ui, sans-serif; --font-family-ds-mono: 'JetBrains Mono', ui-monospace, monospace; --font-size-ds-xs: 11px; --font-size-ds-sm: 13px; --font-size-ds-base: 16px; --font-size-ds-lg: 19px; --font-size-ds-xl: 23px; --font-size-ds-2xl: 28px; --font-size-ds-3xl: 33px; --font-size-ds-4xl: 40px; --font-size-ds-5xl: 48px; --font-size-ds-6xl: 57px; --font-weight-ds-regular: 400; --font-weight-ds-medium: 500; --font-weight-ds-semibold: 600; --font-weight-ds-bold: 700; --text-display-size: 48px; --text-h1-size: 40px; --text-h2-size: 33px; --text-h3-size: 28px; --text-h4-size: 23px; --text-h5-size: 19px; --text-h6-size: 16px; --text-body-lg-size: 19px; --text-body-md-size: 16px; --text-body-sm-size: 13px; --text-label-2xl-size: 23px; --text-label-xl-size: 19px; --text-label-lg-size: 16px; --text-label-md-size: 13px; --text-label-sm-size: 11px; --text-caption-size: 11px; --text-code-size: 13px; /* ========================================================================== Everything below is one of the app's own names repointed at the system's. Component SCSS keeps using the app's names, so THIS BLOCK IS THE WHOLE INTEGRATION: change it and the product moves between token sets without touching a rule. ✅ identical hex for hex ≈ nearest step on the system's ramp; small shift, taken deliberately ⚠️ kept ours: the system has no equivalent, or ours was a considered decision. Each ⚠️ carries its reason and is still an open design question rather than a settled one. ========================================================================== */ --k-night: var(--color-night-900); /* ✅ #162930 */ --k-bluegrey: var(--color-blue-grey-200); /* ✅ #C9D5D9 */ /* Page + surfaces */ --app-bg: var(--color-bg-canvas); /* ≈ was #F6F8FB → #f6f7f8 */ --surface: var(--color-bg-surface); /* ✅ #FFFFFF */ --surface-subtle: var(--color-bg-surface-sunken); /* ≈ was #EEF1F6 → #e8ebed */ --surface-hover: var(--color-neutral-50); /* ≈ was #F1F4F9 → #f6f7f8 */ --surface-border: var(--color-border-default); /* ≈ was #E3E7EF → #d5d9dd */ /* Elevation — three steps, tinted with Night rather than pure black */ --elev-sm: 0 1px 2px rgba(22, 41, 48, .05); --elev-md: 0 6px 20px rgba(22, 41, 48, .09); --elev-lg: 0 18px 46px rgba(22, 41, 48, .16); /* Radius: the system's scale, adopted 2026-08-07. Was 6/10/16, hand-picked to sit above the legacy 4/7/10. The system's is 4/8/12 and it is one of only three things the system supplies, so declining it would have left the integration to colour alone. --radius-control was already 8px in both. */ --radius-sm: var(--radius-ds-sm); /* ≈ was 6px → 4px */ --radius-md: var(--radius-ds-md); /* ≈ was 10px → 8px */ --radius-lg: var(--radius-ds-lg); /* ≈ was 16px → 12px */ --radius-card: var(--radius-ds-card); /* the system's own semantic name */ --radius-pill: var(--radius-ds-pill); /* Interactive controls share one radius so a button and the input beside it align. The prototype uses 8px on inputs and 9px on buttons, which reads as an oversight rather than intent; this reconciles both to 8px. */ --radius-control: var(--radius-ds-control); /* ✅ the system's --radius-control, 8px */ /* Form field rhythm. Exposed as a variable so a container can opt out — previously the margin lived in a 0,0,3,0 selector that nothing could override, and the .form-group-inline escape hatch was never applied anywhere (Concerns-Log C-15). */ --field-gap: 18px; /* Prototype greys the surface-* tints cannot supply: --surface-border is a hairline (1.24:1) and too faint to read as a control boundary. */ --border-strong: var(--color-border-strong); /* ≈ was #CFD5E0 → #b9bfc6 */ /* 🔴 C-88 FIXED HERE. Was #8B94A2 — 3.06:1 on white, failing AA at every size, while V2 used it for text a case manager reads: every timeline row's timestamp-and-author line, the feed and sidebar empty states, and the null-value indicator behind toDisplayNode. It cannot take --color-fg-subtle either: neutral-500 is 4.03:1 and fails the same way --text-secondary did. neutral-600 is 6.32:1. */ --text-muted: var(--color-neutral-600); /* was #8B94A2, 3.06:1 → 6.32:1 */ /* The middle step between --k-night body text and --text-muted labels, for secondary prose like an update note. Now the system's fg-muted, darker than the #55616E it replaces — 9.39:1 rather than 6.32:1. */ --text-2: var(--color-fg-muted); /* ≈ was #55616E → #41474e */ /* Navigation rail — dark */ --sidebar-bg: var(--color-night-950); /* ≈ was #132329 → #0e1b1f */ --sidebar-surface: var(--color-night-800); /* ≈ was #1B3038 → #1a3038 */ --sidebar-text: var(--color-night-200); /* ≈ was #D3DDE0 → #aad1df */ --sidebar-muted: var(--color-blue-grey-500); /* ≈ was #7E8D94 → #6694a3 */ --sidebar-active: var(--color-night-700); /* ≈ was #20363E → #223f49 */ --sidebar-border: var(--color-night-700); /* ≈ was #26404A */ --sidebar-accent: var(--k-bluegrey); /* Status — desaturated, so colour reads as meaning rather than decoration */ --state-ok: #357061; --state-ok-bg: #E6F0EC; /* 🔴 C-90 FIXED 2026-08-07. #9A7833 on its own #F5EEDC background is 3.55:1 and fails AA — and it was the ONLY one of the four pairs that did: ok 4.95, danger 4.86, info 4.81. One token mixed a step too light, not a problem with the desaturation approach, which the other three vindicate. #7E6129 is 5.00:1 in the same hue family. Bites the referral countdown at warning tone, the SOL band, and the stage stepper's warning dot. */ --state-warn: #7E6129; --state-warn-bg: #F5EEDC; --state-danger: #9C4A44; --state-danger-bg: #F3E3E1; --state-info: #4E6C77; --state-info-bg: #E9EEF0; /* Grayscale ramp, from the Kandula brand book (lightness only, no hue). Ported because the interactive layer needs greys that clear WCAG 1.4.11's 3:1 for component boundaries, and every surface-* value above is a fill tint (1.2-1.5:1 vs white) rather than a boundary colour. */ --k-night-700: var(--color-night-800); /* ≈ was #1E353D → #1a3038 — hover on Night */ --k-graphite: var(--color-neutral-500); /* ≈ was #6E7180 → #75808a */ --k-space: var(--color-neutral-400); /* ≈ was #9DA2B3 → #98a1a9 */ --k-steel: #BCBFCC; --k-smoke: #D3D6E0; --k-cloud: #EDEFF7; /* Derived from --state-warn (#9A7833) by dropping lightness ~4% at the same 40deg hue, purely so white text on a filled warn button clears AA: #9A7833 = 4.11:1 (large text only), this = 4.68:1. Not a new hue. */ --state-warn-strong: #8F6F2F; /* Focus. The app sets outline:none in _button.scss and _forms.scss with no replacement anywhere, so keyboard focus was invisible product-wide. Night is 15.06:1 on white and sits outside a Night-filled button via the offset, so one ring works on both light surfaces and dark fills. */ --focus-ring: var(--k-night); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ========================================================================== INCIDENT TYPE — one swap point, surface-neutral. Incident type is coloured on more than one surface (the ops dashboard's caseload bars and referral borders, and any future chip or case-list dot), so the value must not live in a name that presumes a surface. RLY-170 introduced --dashboard-incident-* via getIncidentTypeColor(slug); those should alias these rather than hold their own values, which makes a palette change one edit here instead of a migration across surfaces. These are RLY-170's own values — the blue ramp the dashboard shipped with. Will's call, 2026-07-31: keep the palette the dashboard arrived in. A categorical five-hue set was tried here and reverted. Recorded because the measurements do not go away by reverting: as a ramp, hue carries nothing and lightness carries the whole distinction, so Product Liability against Premises Liability measures 1.33:1 and Medical Malpractice against Worker's Comp 1.12:1 — the same colour to most readers — and the worst adjacent pair sits at normal-vision ΔE 9.6 against a categorical floor of 15. The two lightest steps are also near-invisible on the card they sit on, at 1.46:1 and 1.95:1 on white. Tracked as Concerns-Log C-14, an open design decision, not a defect to fix unasked. If this is ever revisited, re-run the validator rather than nudging hex by eye: hand-tuning was tried and produced palettes that measured worse while looking better. --dashboard-incident-* in the DashboardPage SCSS alias these rather than holding their own copies, so a palette change stays one edit here. ========================================================================== */ --incident-mva: #196CA4; --incident-medical-malpractice: #1A88D1; --incident-premises-liability: #72C2F8; --incident-product-liability: #AADCFD; /* Not in RLY-170's set at all — it fell through to "other" grey, so six real cases rendered as uncategorised. Given a slot in the ramp's own family. */ --incident-workers-comp: #4E6C77; --incident-other: #6B7C8F; /* Motion */ --ease: cubic-bezier(.2, 0, 0, 1); --dur: 180ms; /* ========================================================================== BUG FIXES — these names are referenced by var() in component SCSS but were never defined anywhere, so the declarations were invalid at computed-value time and silently dropped. Nothing in the build can catch this: site_vars is outside webpack and postcss runs autoprefixer only. ========================================================================== */ --text-color: var(--default-text-color); /* 8 uses: CaseReferralFirmTable, FirmFilterMenu, DistanceFilterInput, CaseDetailsPage */ /* --space-md was a shim aliasing --padding-md, added when component SCSS referenced a token that did not exist. The system's spacing scale now defines --space-md for real (12px), and keeping the shim made it CYCLIC — --margin-md → --space-md → --padding-md → --space-md — which resolves to the guaranteed-invalid value, i.e. nothing. Both margins and paddings at the md step silently emptied. Removed; the system's definition stands. */ --color-text-success: var(--success); /* _forms.scss:72 — checked checkboxes had no colour app-wide */ --warn-color: var(--warn); /* LeftNav.scss:132 — transparent badge */ --pill-bg: var(--primary-light-100); /* SearchableSelect.scss:78 */ /* NOT fixable here: _media.scss:2 uses var(--breakpoint-md) inside a media query condition. Custom properties are invalid there per spec, so the whole tablet block (lines 2-51) is dead regardless of any value we define. It needs the SCSS variable $bp-medium, which already exists in _vars.scss:6. */ }