/* ============================================================ Meridian design tokens. Suite accent block replaces the brief's placeholder hexes (sampled from a screenshot, not source) with values audited against what's actually deployed today — see docs/design/COLOR_TOKENS.md for the full trace, contrast tables and sign-off. Four slots per suite: --{suite} primary — fills, or text/icons directly on white --{suite}-deep text/icons ON the soft tint (the pairing that actually failed AA in the first pass — see the audit doc for why deep, not primary, carries this) --{suite}-2 secondary borders/accents --{suite}-soft background tint Dark mode intentionally collapses -deep and -2 onto the single dark primary for each suite (aliased via var(), not duplicated hex) — one bright accent does both jobs at the contrast levels involved; seeded log in docs/design/COLOR_TOKENS.md. Semantic colours (danger/warn/ok/info) are the brief's values as specified — not established brand colours, nothing to audit there. Work Package T section 9 (2026-09-06): SU Records' four --su slots pushed further toward brown, derived from the existing tokens, not a fresh pick -- both modes' hue held at ~24-27deg (already the same warm orange-brown family) with saturation raised roughly 8-10 points and lightness adjusted per-mode (darker primary in light mode for a richer fill, and in dark mode the single accent brought down from a light tan/gold toward an actual brown, not just lightened). Honest limitation: the brief pointed at "the button brown in the dark-mode screenshot" as the reference hue; that screenshot is not available to re-sample in this session, so the new dark --su is a reasoned derivation from the CURRENT dark --su (already the same hue family) pushed browner and verified against every AA pairing below, not a literal colour-pick from that image. Full before/after contrast table in docs/design/COLOR_TOKENS.md's Work Package T section 9 addendum. ============================================================ */ :root{ /* Never declared anywhere in this app until now (2026-09-04) — every native form control (select, input incl. date/time, textarea, the option list a select opens, spinner buttons, scrollbars) was left to Chromium's own undocumented auto-dark-adaptation whenever a page's own CSS didn't set every one of color/background explicitly, because the browser had no signal that :root[data-theme="dark"] was actually a dark UI. That adaptation does not use this app's tokens - it produced an arbitrary teal-ish text colour on the Audits dashboard filter bar's , confirmed by getComputedStyle reporting color:rgb(0,0,0) while the control visibly rendered teal. Declaring color-scheme explicitly removes the browser's own guesswork as a factor everywhere at once; per-control color/background are still set explicitly below and in each module's CSS, since color-scheme alone does not reach every property (e.g. option background in an open dropdown popup, which respects this but not arbitrary page CSS). */ color-scheme: light; /* neutrals — light */ --canvas:#F1F4F3; --surface:#FFFFFF; --surface-2:#F7F9F8; --sunk:#E7ECEA; /* --ink-3 was #5D706A. Same shortfall as its dark twin below and for the same reason: it clears AA on white, but not on the suite canvas tints that sit over it — 4.36:1 on Compliance's, which is the breadcrumb and every "Meridian /" on those pages. Deepened until the worst of them clears 4.5:1. */ --ink:#0F1F1B; --ink-2:#425650; --ink-3:#556760; --line:#D6DEDB; --line-2:#E6ECEA; /* suite accents — audited against production, docs/design/COLOR_TOKENS.md */ --leave:#3E5C2E; --leave-deep:#2C4320; --leave-2:#6E9455; --leave-soft:#E7F0E2; --hr:#78394A; --hr-deep:#572934; --hr-2:#A34B5F; --hr-soft:#F5E8EC; /* TWO CHANGES, 2026-09-17, and they were asked for in that order. AUDITS' HUE. It was teal (#147D83, 183°). Workforce's blue is 208° and Policies' grey-blue is 197°, so three suites sat inside 25° of each other. It went to deep magenta at 308° — numerically 52° from Training, but magenta and Training's violet read as the same family on a rail, which is the thing the rule was a proxy for. It is now dark gold at 57°: the brief's second preference, reachable once the requirement was "not purple" rather than "warm gold", and 31.9° from SU Records' brown. THE DEPTH. Every suite except SU Records is darker, with SU Records as the reference — it measured 7.70:1 against white and the others ranged from 5.47 to 7.77. They now sit between 7.57 and 8.93, so the rail reads as one set rather than one deep brown among lighter neighbours. DARK MODE IS DELIBERATELY UNCHANGED (except Audits, which had to follow its hue). In dark mode these values are used AS TEXT on a near-black canvas, so darkening them is the opposite of what was asked for. */ --audits:#565200; --audits-deep:#3A3700; --audits-2:#8A8100; --audits-soft:#F2F0D8; --training:#554784; --training-deep:#3B315C; --training-2:#7A66AE; --training-soft:#F0ECF8; --su:#7C451D; --su-deep:#7C451D; --su-2:#B46E3C; --su-soft:#F4E4D7; /* Workforce. #04549C is taken FROM public/logo-ows.png: 25,632 pixels of it, seven times the next blue in the mark. Not the placeholder blue in the brief, because the logo was in the repo to be read. */ --workforce:#044A8A; --workforce-deep:#02305C; --workforce-2:#04549C; --workforce-soft:#E3EDF7; /* Finance (item 0cx, A12: "go for a darker green"). Forest green, 153deg: 54deg from Leave and 56deg from Workforce, 10.33:1 against white -- deliberately the darkest suite, as asked. It sits 8deg from the status green --ok, which is allowed because --ok is not a suite: Finance's green never means "good"; status is always words plus --ok/--warn/--danger. */ --finance:#0B4A2E; --finance-deep:#072F1D; --finance-2:#136B43; --finance-soft:#E1EFE6; /* Full-page washes are deliberately only 40% of the already-soft suite colour, blended into the neutral canvas. */ --leave-canvas:color-mix(in srgb,var(--leave-soft) 40%,var(--canvas)); --hr-canvas:color-mix(in srgb,var(--hr-soft) 40%,var(--canvas)); --audits-canvas:color-mix(in srgb,var(--audits-soft) 40%,var(--canvas)); --training-canvas:color-mix(in srgb,var(--training-soft) 40%,var(--canvas)); --su-canvas:color-mix(in srgb,var(--su-soft) 40%,var(--canvas)); --workforce-canvas:color-mix(in srgb,var(--workforce-soft) 40%,var(--canvas)); --finance-canvas:color-mix(in srgb,var(--finance-soft) 40%,var(--canvas)); /* Policies: no production module exists yet — every value below is derived, not audited against live usage. #6B7A80 is a deliberate placeholder scoped to disabled UI only (the rail's "soon" entry, its coming-soon card): it clears AA for large text/UI (3:1) but not normal body text (4.5:1), which is fine because a disabled module never renders body text in its accent colour. Re-derive and re-test properly once Policies is actually built. */ --policies:#55636A; --policies-deep:#333C40; --policies-2:#68777D; --policies-soft:#E8EAEB; /* semantic — these mean the same thing in every suite, always */ --danger:#B0332A; --danger-soft:#FAE7E5; /* Work Package T (continuation) Section 5: --warn/--ok's own text-on- --warn-soft/--ok-soft pairing (the shared .tag--warn/.tag--ok status badges every suite uses) measured 3.93:1 / 4.30:1 in light mode -- under the 4.5:1 text threshold (dark mode already passes at 6.73/5.50, unchanged here). Each value below is darkened just enough to clear 4.5:1 against its own -soft background (4.53 for --ok; --warn needed a slightly bigger margin, 4.68, once actually rendered -- the simple hex-on-hex arithmetic used to pick a first candidate was close but not exact, confirmed via scripts/check-shared-contrast-fixes-local.js), same hue, no other token depends on --warn/--ok's exact shade. */ --warn:#975F10; --warn-soft:#FBF0DE; --warn-icon:#A76B00; /* --warn-ink is --warn darkened just enough to be SMALL TEXT on the sunk panel colour, where --warn itself lands at 4.12 against a needed 4.5. Same hue. 4.71 on --sunk, 6.08 on --surface, 5.75 on --surface-2. --warn stays exactly as it is: it is correct for icons, borders, dots and large text, and other suites depend on its shade. */ --warn-ink:#8A5710; --ok:#2E794D; --ok-soft:#E4F0E9; --info:#1C6795; --info-soft:#E2EEF6; /* STATUS FILLS: done against not-done (2026-09-18). "The colour shades for grey and green are too similar." They were: --ok-soft #E4F0E9 and --sunk #E7ECEA are both pale and both green-tinted -- this palette's neutrals lean green -- and differ by a few units of G. A status that is DONE and one that is NOT STARTED must not be told apart by squinting. Measured as CIE76 colour difference: the old pair was dE 3.7, at the edge of what anybody can see. --ok-fill is a plate that is plainly green and --neutral-soft is a grey with no green in it: dE 18.8 here, 26.4 in dark. Each has an ink that clears AA on it: --ok-ink 5.8:1 on --ok-fill, --ink-2 6.7:1 on --neutral-soft. --neutral-bar is the empty part of a progress bar, light so a solid green segment stands out against it. scripts/check-status-fills.js holds these numbers. --sunk and --ok-soft are unchanged: other surfaces depend on them. */ --ok-fill:#C2E4CD; --ok-ink:#1F5C37; --neutral-soft:#ECEDEF; --neutral-bar:#C3C7CD; /* three radii, each with a job */ --r-chip:6px; --r-card:12px; --r-modal:16px; --rail:64px; --rail-open:236px; --bar:56px; --ease:cubic-bezier(.32,.72,0,1); } [data-theme="dark"]{ color-scheme: dark; --canvas:#0E1416; --surface:#161E21; --surface-2:#1B2427; --sunk:#111A1C; /* --ink-3 was #758883, which clears AA on the plain --canvas but NOT on the suite canvas tints that sit over it: 3.50:1 on Compliance's, 4.18:1 on Leave's, 4.47:1 on Audits'. It is the token behind .ink-faint and .crumb__sep, so that was the breadcrumb and every "Meridian /" on those pages, plus Training's filter labels. Raised until the WORST of those canvases clears 4.5:1 (Compliance's, now 4.88:1) rather than tuning it against the bare canvas and leaving the tinted ones short. Measured by check-dark-mode-legibility-live.js on the real pages. */ --ink:#E3EAE8; --ink-2:#9FB1AC; --ink-3:#8FA29C; --line:#273336; --line-2:#1F2A2D; /* A form control's edge (2026-10-04): --line is 1.30:1 on --surface, under the 3:1 a control's boundary needs (WCAG 1.4.11); this is 3.60:1. */ --control-edge:#647873; --leave:#8FBB77; --leave-deep:var(--leave); --leave-2:var(--leave); --leave-soft:#2F4125; --hr:#BC7687; --hr-deep:var(--hr); --hr-2:var(--hr); --hr-soft:#2E1A1F; --audits:#CFC455; --audits-deep:var(--audits); --audits-2:var(--audits); --audits-soft:#332F10; --training:#998BC0; --training-deep:var(--training); --training-2:var(--training); --training-soft:#2C2541; --su:#CF7F4A; --su-deep:var(--su); --su-2:var(--su); --su-soft:#342113; --workforce:#6FAFEA; --workforce-deep:var(--workforce); --workforce-2:var(--workforce); --workforce-soft:#14293C; --finance:#57B886; --finance-deep:var(--finance); --finance-2:var(--finance); --finance-soft:#16301F; --policies:#909DA2; --policies-deep:var(--policies); --policies-2:var(--policies); --policies-soft:#21333B; --danger:#E9695C; --danger-soft:#3A1B1870; --warn:#E0A244; --warn-soft:#33240D70; --warn-icon:#EAB34D; /* Dark mode already passes AA for warn text on every dark surface the sweep covers, so this is deliberately the same value -- the token exists to be safe in both themes, not to change this one. */ --warn-ink:var(--warn); --ok:#57B37B; --ok-soft:#16302270; --info:#5AA5D6; --info-soft:#12293870; /* Dark twins of the status fills. --ok is too dim on a green plate (3.9:1), so the ink is lifted: --ok-ink 5.6:1 on --ok-fill, --ink-2 6.0:1 on --neutral-soft. */ --ok-fill:#1F4A33; --ok-ink:#7FD3A0; --neutral-soft:#2A2F35; --neutral-bar:#4A5058; }