/* ========================================================================= 121 Brokers design tokens — Krayin implementation ------------------------------------------------------------------------- GENERATED FROM the design-system mirror. Do not edit values by hand. Source : .claude/design-system/colors_and_type.css (sha256 1912a3a71155809f) Synced : 2026-08-08 Owner : design-system-agent Changing a value here without changing it in Claude Design forks the design system. Update the design, re-sync the mirror, then regenerate this file. ========================================================================= */ /* ---- Poppins ------------------------------------------------------------ Subset of the family: only the weights the type scale actually uses (400/500/600/700/800/900 + one italic). The full 18-face family lives in the mirror; shipping all of it would cost 3 MB for weights nothing renders. Paths resolve through the Theme package's Vite build directory. */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; src: url("../fonts/Poppins-Regular.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; src: url("../fonts/Poppins-Italic.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; src: url("../fonts/Poppins-Medium.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; src: url("../fonts/Poppins-SemiBold.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; src: url("../fonts/Poppins-Bold.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; src: url("../fonts/Poppins-ExtraBold.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; src: url("../fonts/Poppins-Black.ttf") format("truetype"); font-display: swap; } :root { /* ---- PRIMITIVES — escape hatches. Components must not reference these. */ --green-50:#e6f9ef; --green-100:#b8edd0; --green-200:#7bdfa9; --green-300:#3dcd82; --green-400:#14b96b; --green-500:#00a959; --green-600:#008f4a; --green-700:#00763d; --green-800:#005c2f; --green-900:#004423; --ink-50:#f6f7f8; --ink-100:#eceef1; --ink-200:#d6dae0; --ink-300:#b3bac3; --ink-400:#8a929e; --ink-500:#5f6770; --ink-600:#404750; --ink-700:#2d3239; --ink-800:#1f2429; --ink-900:#14181c; /* Extrapolated one step past ink-900 - not a Claude Design ramp step. It is already declared at Admin/tailwind.config.js:43 with this exact comment and is what Tailwind's dark:bg-gray-950 already paints on this page (the measured dark background is rgb(13,16,19)). Lives in :root, not .dark, because primitives are mode-independent - see .claude/design-system/DARK-MODE-RULINGS.md D2.1. */ --ink-950:#0d1013; --white:#ffffff; --cream:#fbfbf9; --mist:#f3f6f4; /* ---- SEMANTIC — this is what components reference. */ /* success references the primitive, exactly as the source does — if the brand green changes, success must follow it. Hardcoding #00a959 here would break that link the first time the palette moves. */ --success:var(--green-500); --warning:#f6a624; --danger:#d8413a; --info:#2c7ee0; --bg:var(--white); --bg-alt:var(--cream); --bg-tint:var(--mist); --bg-invert:var(--ink-900); --fg:var(--ink-700); --fg-strong:var(--ink-900); --fg-muted:var(--ink-500); --fg-on-dark:#ffffff; --fg-on-brand:#ffffff; /* ---- EXTENSION — the --fg- / --ui- namespace split. RATIFIED by design-system-agent, 2026-08-23; the ruling and every measurement behind it are in .claude/design-system/ACCESSIBILITY-AMENDMENTS.md (A1). THE INVARIANT THE NAMESPACE NOW CARRIES: every --fg-* token is safe as text at any size this product uses. Non-text foregrounds live under --ui-*. WHY A RENAME RATHER THAN A COMMENT. #8a929e as body text was found in FIVE places on the leads list alone (column headings 3.14:1, "No status" 3.14, stats-bar labels 3.03, rail eyebrows 3.03, .cx-facet--elsewhere 3.14) - while this codebase already stated the rule in two separate CSS comments and applied it to exactly one element. Documentation had already been tried and had already failed. `--fg-subtle` reads as "a step quieter than muted"; nothing in that name says "illegal as text", and `--ui-subtle` on an 11px label is wrong on sight. THERE IS NO SIZE AT WHICH #8a929e IS LEGAL TEXT HERE: "large" begins at 18.66px bold / 24px regular and this product's meta type is 10.5-13px. */ /* Non-text foreground. #8a929e is 3.14:1 on white - it clears the 3:1 bar of SC 1.4.11 and no text bar at any size. Icons, rules, disabled controls, decorative glyphs. Never `color:` on rendered copy - use --fg-muted. */ --ui-subtle:var(--ink-400); /* DEPRECATED alias - the mirror still ships --fg-subtle, and _adherence.oxlintrc.json enumerates it among the 96 source tokens, so dropping it now would fork the lint contract. No new call sites. Remove at the sync that lands --ui-subtle upstream, or 2026-09-30, whichever is first. Gate, since this repo has no stylelint: git grep -nE "color:\s*var\(--(ui-subtle|fg-subtle)\)" -- '*.css' '*.blade.php' Any hit is a defect. */ --fg-subtle:var(--ui-subtle); --brand:var(--green-500); --brand-hover:var(--green-600); --brand-press:var(--green-700); --brand-soft:var(--green-100); /* ---- EXTENSION — not in the source DS. See KRAYIN-RECONCILIATION.md. The brand green fails WCAG AA against white at normal text size: 3.08:1 both ways (white on green, and green as text on white). It passes the 3:1 bar for UI components and large text, which is what a marketing site mostly needed — a data-dense CRM pairs it with 14px text constantly. --brand-strong is the AA-safe brand surface: 5.74:1 against white in either direction. Use it ANYWHERE brand green meets body-size text. --brand stays green-500 for decorative work — borders, chart fills, progress bars — where 3:1 is the correct bar and the surface is white. NOT focus indicators: 3:1 is the right bar for them, but green-500 measures 2.65 on ink-100, 2.83 on mist, 2.87 on ink-50 and 2.97 on cream, and this product's chrome is cream and mist. See --focus-outline. */ --brand-strong:var(--green-700); --brand-strong-hover:var(--green-800); --brand-strong-press:var(--green-900); /* ---- EXTENSION — the grid header band. DATA-TABLE-RULINGS.md LV1.1.A (GC1, 2026-09-24). Every Theme grid's `.cx-grid-head` and the Manage columns dialog's header preview paint from these four, which is why they live here on :root rather than inside `.cx-datagrid-body`. SAME IN LIGHT AND DARK — `.dark` must NOT repoint them: white on green-700 is 5.74:1 in both themes, and green-500 (--brand) would fail at 3.08:1. Text 5.74 · band vs dark --bg 3.11 · resize bar 3.35 · border 1.42 (decorative). */ --grid-head-bg:var(--brand-strong); --grid-head-fg:var(--fg-on-brand); --grid-head-border:var(--brand-strong-hover); --grid-head-resize:color-mix(in srgb, var(--grid-head-fg) 65%, transparent); /* ---- EXTENSION — brand-as-copy, split from brand-as-fill. PROPOSED by design-system-agent 2026-08-23 and ratified FOR IMPLEMENTATION on this branch only (full ratification is still pending crm-design-system-architect + crm-design-director); see .claude/design-system/DARK-MODE-RULINGS.md (D0, D3). One green cannot serve both roles once dark mode exists: brand AS TEXT needs to lighten on a dark surface (green-700 measures 3.11:1 on #14181c, fails 4.5), but brand AS A FILL under white text must stay dark (green-700+white is 5.74:1 and correct; green-300+white would be 2.05). Flipping --brand-strong itself was rejected — it drives Krayin's COMPILED bg-brandColor / text-brandColor utilities (eleven files), which cannot follow a custom property, so flipping it would put a mint DS button beside a dark-green Krayin button on the same toolbar. --brand-strong / --brand / --fg-on-brand all stay put. --brand-text is the brand as RENDERED COPY: links, the active saved-view tab, the lead-name link, the breadcrumb link. Light value equals what those call sites already resolved to via --brand-strong, so adopting it changes no light pixel. */ --brand-text:var(--green-700); /* ---- EXTENSION — chart palette. Not in the source DS, which was built from a marketing site and needs exactly one accent. Charts are the legitimate exception: a doughnut of revenue-by-source encodes IDENTITY, and identity needs distinct hues. Categorical order is FIXED — slot 1 is always the first series, never recycled, so a filter that removes a series never repaints the survivors. Validated (all six checks pass, light AND dark) — do not reorder or substitute by eye, re-run the validator: worst adjacent CVD ΔE 23.7 deutan / 11.9 tritan normal-vision floor ΔE 25.2 contrast vs surface all >= 3:1 Slot 1 is green-700, not the brand green-500, for the same reason as --brand-strong: green-500 sits at exactly 3:1 and fails the lightness band. */ --chart-1:var(--green-700); /* brand */ --chart-2:#2c7ee0; /* info blue */ --chart-3:var(--amber-700); /* #b97908, unchanged. DECLINED: repointing this at --amber-800. The palette above passed a six-check CVD/ΔE validation and must not be substituted by eye; chart fills are non-text and clear 3:1. Re-run the validator first if amber-800 is ever wanted here. */ --chart-4:#7a4fd8; /* violet — from mockup 5a's pipeline meter */ --chart-5:#d8413a; /* danger red */ /* Polarity pair. Won/Lost is not arbitrary identity, it is outcome, so it uses the status hues rather than categorical slots. Always shipped with a text label, never colour alone. */ --chart-positive:var(--green-700); --chart-negative:#d8413a; /* Sequential ramp for magnitude (pipeline stages). One hue, light to dark — never a rainbow. */ --chart-seq-1:var(--green-200); --chart-seq-2:var(--green-300); --chart-seq-3:var(--green-500); --chart-seq-4:var(--green-700); --chart-seq-5:var(--green-900); /* Chart furniture: recessive, so the data carries the emphasis. */ --chart-grid:var(--divider); --chart-axis-text:var(--fg-muted); /* ---- EXTENSION — the status-tone ramps. RATIFIED by design-system-agent, 2026-08-23; see ACCESSIBILITY-AMENDMENTS.md (A3). The source DS has NO amber ramp - only --warning (#f6a624, a meter and icon fill) - and no blue text step. The badge pairs #fef4e6/#b97908 and #eef4fd/#2c7ee0 live in CRM-Mockups.dc.html as literals, thirteen occurrences for amber alone, and #b97908 was a literal in three of this package's stylesheets for want of a token. THE DEFECT THEY FIX. `badge--amber` measured 3.33:1 at its real 10.5px/600 and `badge--blue` 3.68:1 - both fail SC 1.4.3. Amber is the `in_progress` family, 8 of the 17 lead statuses, so it is the busiest cell on the busiest screen; blue is `new`, the status every lead enters through. BACKGROUNDS ARE UNCHANGED - they ripple into avatar chips, alert icons and facet rules, and the foreground alone closes the gap with headroom. THE TWO-STEP RAMP IS LOAD-BEARING, which is why one token cannot serve: -700 is the non-text step (3px family rules, alert glyphs, chart fills, all at the 3:1 bar) and -800 is the only step that carries text. */ --amber-50:#fef4e6; --amber-700:#b97908; /* fills, 3px family rules, icon glyphs — 3:1 bar */ --amber-800:#8a5a00; /* text — 5.45 on --amber-50, 5.93 white, 5.45 mist */ /* Dark-only ramp steps, needed so --tone-amber-* / --tone-blue-* have somewhere to point under .dark (see D2). Values are DARK-MODE-RULINGS.md's own measurements (D2 / D6 table), not invented here: amber-900/-400 land the tone pair at 5.74:1 text-on-fill on a #14181c row, blue-900/-300 at 6.08:1. */ --amber-900:#5c3c04; /* dark fill — .dark --tone-amber-bg */ --amber-400:#f8b959; /* dark text — .dark --tone-amber-fg, 5.74 on amber-900 */ --blue-50:#eef4fd; --blue-700:#1b62b8; /* text — 5.45 on --blue-50, 6.02 white */ --blue-900:#0e2b4b; /* dark fill — .dark --tone-blue-bg */ --blue-300:#7dabec; /* dark text — .dark --tone-blue-fg, 6.08 on blue-900 */ --tone-amber-bg:var(--amber-50); --tone-amber-fg:var(--amber-800); --tone-blue-bg:var(--blue-50); --tone-blue-fg:var(--blue-700); /* ---- EXTENSION — the four remaining tone pairs, which close the six-colour tint set (green · blue · amber · purple · red · neutral). MAIL-RULINGS M8 (the NAMES are ratified on crm-design-director's countersignature 2026-09-12) and M14, which rules the pairs must land in this block before slice 2 paints a label. RATIFIED for implementation here, PROPOSED for upstream ratification in Claude Design — the same status the amber and blue pairs above carry. THREE OF THE FOUR INTRODUCE NO VALUE. green, neutral and red are exactly what .badge--green / .badge--neutral / .badge--red ship today (components.css:322, 301, 303), so the repointing of those badges — Task 15's job, not this commit's — changes no pixel. Red's text step is already a token (--danger-text, #c92a2a light / #e8a0a0 dark, both from DARK-MODE-RULINGS D6) and is referenced rather than re-declared, so the hex keeps one definition site. A3's "lift red's four steps to --red-50/-700/-900/-300" is NOT done here: with no call site those four primitives would ship dead, and the lift is a no-value-change rename that belongs with the badge repoint. Every figure below is fg-on-bg, WCAG 2.x relative luminance, computed from these hex values, to two decimals. All four clear SC 1.4.3's 4.5:1 for rendered copy and land inside the 4.63–8.08 band the shipped tones already occupy. */ --tone-green-bg:var(--green-100); --tone-green-fg:var(--green-800); /* 6.25:1 */ --tone-neutral-bg:var(--ink-100); --tone-neutral-fg:var(--ink-600); /* 8.08:1 */ --tone-red-bg:#ffebeb; --tone-red-fg:var(--danger-text); /* 4.76:1 */ /* COUNTERSIGNED by design-system-agent on 2026-09-18 (KANBAN-RULINGS K3.2 / finding K-F7). M8's binding condition — "until both pairs are countersigned, purple is selectable in no picker and painted in no row" — was already discharged by shipped code: the dark pair is declared below with its ΔE re-run reported, and --tone-purple-fg is painted as a tone carrier (mail-client.css:1091, mail-rules.css:356), as a badge (leads/view/panels/notes.blade.php:344, gallery.blade.php:123) and as a mailbox colour (Mail/src/Config/mailbox.php:87). NO VALUE CHANGED with this comment. Purple is now also the enquiry board's tone for `submitted_to_lender` and `passed_to_partner`. */ /* The light pair is NOT new either: it is components.css:320's shipped .badge--purple, and #7a4fd8 is also --chart-4's violet. It is kept as a literal rather than var(--chart-4) so a tone never depends on a chart slot. 4.63:1 fg-on-bg; --fg (#2d3239) on this fill is 11.20:1 and the fg step is 5.33:1 on --bg, so M14's 3px bar clears SC 1.4.11 in light. The DARK pair is the value M8 refused to guess — see the .dark block, where the ΔE re-run this ruling requires is reported. M8's binding condition ("until both pairs are countersigned, purple is selectable in no picker and painted in no row", restated by M14) is DISCHARGED — see the countersignature above. */ --tone-purple-bg:#f3ecfd; --tone-purple-fg:#7a4fd8; /* 4.63:1 */ /* ---- EXTENSION — the danger TEXT step. MAIL-RULINGS finding A, ratified on crm-design-director's countersignature 2026-09-12. RATIFIED for implementation here, PROPOSED for upstream ratification in Claude Design — the same status the amber and blue ramps above carry. --danger (#d8413a) is 4.43:1 on --bg and 4.02:1 on dark --bg: it clears SC 1.4.11's 3:1 bar as a GLYPH or a FILL and fails SC 1.4.3's 4.5:1 as rendered copy in BOTH modes. Same split-role move as --brand-text (D3), and the reason a dot may be --danger while the word beside it may not. NEITHER VALUE IS NEW: #c92a2a is the shipped badge--red text colour (5.46:1 on white) and #e8a0a0 is DARK-MODE-RULINGS D6's measured dark red step (8.47:1 on dark --bg). Call sites write `color: var(--danger-text, #c92a2a)`. The fallback is LIGHT-ONLY - #c92a2a on dark --bg #14181c is 3.27:1 - so it protects against a missed publish in light mode only, and dark mode depends on this token itself being published. Never `color: var(--danger)` on copy; that grep is a gate crm-design-qa-engineer owns. */ --danger-text:#c92a2a; --border:#e3e7ea; --border-strong:#c8ced5; --divider:#eef1f3; /* ---- EXTENSION — the focus indicator. RATIFIED by design-system-agent, 2026-08-23; see ACCESSIBILITY-AMENDMENTS.md (A2). The source DS defines NO solid focus-outline colour at all - only --focus-ring, a translucent glow - and the one solid focus treatment in the mockup is a 2px solid --brand outline. Measured against the colour it is really drawn against, --brand clears SC 1.4.11's 3:1 bar on pure white by 0.08 and NOWHERE ELSE: 2.65 on the saved-view tab (ink-100), 2.83 on facet checkboxes (mist), 2.87 on a row action over a hovered row (ink-50), 2.97 on a rail facet summary (cream). --focus-outline measured: 5.74 white · 5.54 cream · 5.35 ink-50 · 5.27 mist · 4.94 ink-100 · 4.39 green-100 · 3.62 border-strong. GEOMETRY IS A RULE, NOT A TOKEN: 2px solid, outline-offset 2px. Where an inset ring is unavoidable, the adjacent colour is the component's own fill - measure against that, not against the page. --focus-outline-invert is not decoration. Green-700 has nowhere to go inside a green or black fill (1.86:1 on --brand, 3.11:1 on --bg-invert); white is 3.08 and 17.84 there. Use it wherever the indicator lands INSIDE such a fill. A two-tone (inner light + outer dark) ring was considered and rejected as the default: it doubles the indicator's weight on an already dense grid, and --focus-outline-invert covers the only case that needed surface-independence. Available if a future surface defeats both. */ --focus-outline:var(--green-700); --focus-outline-invert:var(--white); /* The translucent box-shadow halo. Role unchanged, value rebased onto green-700 so the halo and the outline stop disagreeing on hue. It carries no compliance of its own. */ --focus-ring:color-mix(in srgb, var(--green-700) 45%, transparent); /* ---- EXTENSION — control-surface interaction states. Closes gaps G1/G2 from the design-system-agent's combobox + calendar audit (form-controls/ds-spec.md); ratified FOR IMPLEMENTATION on this branch only, same pending-full-ratification status as --brand-text above. Two existing hover fills are PRIMITIVES that never flip under .dark — .menu__item (components.css, --ink-50) and .cx-menu-item (column-menu.blade.php, --ink-100) — so a menu row hovers near-white on a dark popover. --control-hover-bg is the semantic replacement: it is --bg-tint under another name, so it already inherits --bg-tint's own .dark repoint. Restated (same expression) under .dark below purely for the auditability reason --chart-grid / --chart-axis-text already are (compare line ~171-172 with ~343-344) — not because the value differs. */ --control-hover-bg:var(--bg-tint); /* --brand-soft (green-100) is a primitive alias too — a "selected" fill built on it stays pale mint on a dark popover, the same failure mode as the hover fills above (see nav.css:239 / filter-panel.blade.php:1640 for the existing --brand-soft "soft selected" pairing this replaces). --control-selected-bg instead uses the color-mix formula this same audit already calls "theme-safe" for combobox/day-cell hover (ds-spec.md A.3 / B.3): it composites against whichever --bg is behind it, so light and dark both fall out of one expression — no new hex to measure or run through the chart validator. 16% matches the "one step past hover" weight the audit already specified for the pressed state (A.3), reused here for "selected" rather than inventing a third number. */ --control-selected-bg:color-mix(in srgb, var(--brand) 16%, transparent); /* ---- EXTENSION — overlay scrims and the one sanctioned dialog blur. RATIFIED by crm-design-system-architect 2026-09-04; the ruling, its boundary and everything that stays forbidden are in .claude/design-system/DIALOG-RULINGS.md (M1). --overlay-scrim is not a new value: it is the literal that modals.css already carries twice (:66 ::backdrop, :75 the no-