/* * BPD design tokens: the single source of truth for the palette. * * Before this file the palette was copy-pasted into eleven places: nine tool * pages, the Tools hub, and twice inside bpd-record-web.css. They had already * drifted. Measured 5 Sep 2026: * * - Record Web declared --stamp:#D54242 while all ten pages used #B23A2E, * feeding 10 consumers (unknown values, stale chips, OATH labels, * highlights, fold chevrons, warning states). * - Record Web never declared --stamp-soft at all, so one border rule fell * back to currentColor and rendered navy instead of pale blue. * - Code Reference shipped on the prototype's warmer palette entirely. * * None of it was visible without measuring, which is the point. * * MIGRATION, and why it is safe to do one page at a time: * these are declared on :root. Every page currently declares the same names on * its own root (#bpe-root, #nycha-standards, #bprw-root and so on), and an id * selector outranks :root, so nothing changes on the day this file lands. * Deleting a page's local block then lets that page fall through to these * values, which are identical. Every intermediate state is correct and * shippable. Delete one page's block, verify, move on. * * Both spellings are defined. --bpd-* is canonical and namespaced; the * unprefixed aliases exist so the existing pages resolve without being * rewritten. New work should use --bpd-*. */ :root { /* Canonical, namespaced. Use these in new work. */ --bpd-paper: #F5F8FC; --bpd-card: #FFFFFF; --bpd-ink: #0B2545; --bpd-blue: #1B3B6F; --bpd-blue-soft: #3D5A80; --bpd-steel: #5C6B73; --bpd-hairline: #D7E0EA; --bpd-stamp: #B23A2E; --bpd-stamp-soft: #DDEAF3; --bpd-grid-line: rgba(27, 59, 111, 0.14); /* Positive state. Added 5 Sep 2026, consolidating five values into two. There are two roles here, not one, and the second is not optional: --bpd-ok #2E7D4F 5.05 on white, 4.27 on the #E3EFE7 mint (AA on white only) --bpd-ok-deep #1B6B41 6.51 on white, 5.51 on that same mint (AA on both) Green on the #E3EFE7 mint badge fill is the whole reason for the pair. --bpd-ok fails AA there at 4.27, so anything sitting on mint uses --bpd-ok-deep. Building Profile worked this out first; Violation Explorer hit the identical problem on .bpv-pill.ok and independently invented #276840 for it, which is how we ended up with the spread. What was consolidated, by relative luminance: #186c48 (Code Reference) 0.1139 #1B6B41 (Building Profile) 0.1113 <- kept as --bpd-ok-deep #276840 (Violation Explorer) 0.1070 Those three are the same colour, about 4 percent apart, indistinguishable side by side. A fourth, #2EAE66 in bpd-record-web.css, was dead: declared in both root blocks, consumed by nothing. Deleted there, not moved here. It was a dark-surface green (6.11 on #rw3-root's #071A33, 2.85 on white), so do not fold it into --bpd-ok if it ever comes back. Do not collapse these two into one. */ --bpd-ok: #2E7D4F; --bpd-ok-deep: #1B6B41; /* Caution state. Added 5 Sep 2026. Two tokens with different jobs: --bpd-warn #8A4B00 6.80 on white, 6.28 on the 10% tan fill --bpd-warn-line #C89A5B 2.55 on white, BORDERS AND RULES ONLY --bpd-warn-line is not a text colour and must never be used as one. On Inspection Matrix (994), .card-sum .sum-none did exactly that and rendered at 2.21, the worst contrast found on the site. Fixed 5 Sep 2026. It is correct as the 3px rule on .bpz-cell.unk, .bpz-alert and .hero-msg. Unlike the greens, these were NOT near-duplicates. Violation Explorer (1597) and Zoning Map (1622) used #8A4B00; Inspection Matrix used #B8791A, luminance 0.2394 against 0.1044, more than 2x apart. #B8791A failed AA in two places: .hero-msg text on tan at 3.35, and white text on the .sia-flag.is-warn fill at 3.63. #8A4B00 was kept because it is the one that passes, not because two pages outvoted one. --warn-deep #976415 stays page-local on 994 and is deliberately not here. It is the middle rung of a .b1/.b2/.b3 severity ladder; folding it into --warn would make that badge identical to the warn flag. */ --bpd-warn: #8A4B00; --bpd-warn-line: #C89A5B; /* Type. Added 5 Sep 2026. These were declared on 6 of 12 pages in three different shapes, and the stacks had drifted: --mono, three variants 'IBM Plex Mono', ui-monospace, monospace 902 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace 1597, 1622, bpd-record-web.css + SFMono-Regular 994, 2421, 6928 <- kept --display, two variants 'Archivo Black', sans-serif everyone else 'Archivo Black', 'Inter', system-ui, sans-serif 6928 <- kept The longest mono stack was kept because SFMono-Regular is the right macOS system mono and its absence only shows when IBM Plex Mono fails. Code Reference's display stack was kept because falling back to Inter holds the site's typeface instead of dropping to a generic sans. These differences are invisible while the webfonts load, which they do since they are self-hosted. They decide only how a page degrades when a font fails, and until now pages degraded differently from each other. UPDATED 11 Sep 2026: that last sentence stopped being true the moment font-display:swap was measured against real font metrics. "Invisible while the webfonts load" assumed the swap itself was invisible; it wasn't; that's the whole reason this edit exists. The Header template part (twentytwentyfive//header) now defines three metric-matched fallback faces -- 'Archivo Black Fallback', 'IBM Plex Mono Fallback', and 'Manrope Fallback' -- alongside the pre-existing 'Inter Fallback', each computed from the real font files against Liberation Sans/Liberation Mono and a single size-adjust percentage (same technique already proven on Inter). The Header loads site-wide before any tool-page CSS, so all four fallback faces are already available by name to every page; this file is what was still missing the reference to them. Fixed below. Full method and the actual measured numbers: project doc claude/font-swap-fallback-fix-sep-11.md. */ --bpd-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --bpd-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bpd-display: "Archivo Black", "Archivo Black Fallback", "Inter", system-ui, sans-serif; /* Aliases. These are the names the existing pages already use, so a page resolves correctly the moment its own block is deleted. Do not give these literal values: they must stay pointed at the canonical tokens above, or this file becomes the twelfth copy rather than the only one. */ --paper: var(--bpd-paper); --card: var(--bpd-card); --ink: var(--bpd-ink); --blue: var(--bpd-blue); --blue-soft: var(--bpd-blue-soft); --steel: var(--bpd-steel); --hairline: var(--bpd-hairline); --stamp: var(--bpd-stamp); --stamp-soft: var(--bpd-stamp-soft); --grid-line: var(--bpd-grid-line); --ok: var(--bpd-ok); --ok-deep: var(--bpd-ok-deep); --warn: var(--bpd-warn); --warn-line: var(--bpd-warn-line); --mono: var(--bpd-mono); --body: var(--bpd-body); --display: var(--bpd-display); }