/* ========================================================================== shared/bws-chips.css — THE CHIP / PILL / BADGE COMPONENT'S TOKENS (P2042) -------------------------------------------------------------------------- docs/design-system-plan-2026-09-10.md §4c names Chip/pill and Badge as component pieces; §6's P2042 row scopes this piece to two things: (1) a shared token vocabulary a chip/pill/badge control reads, following shared/bws-buttons.css's own shape exactly, and (2) resolving the `.pill` naming collision the plan's own recon found — `.pill` meant the marketing feature-list chip on stackdesign-home.html AND the per-tab count badge on modules/cut-list-optimizer/cut-list-optimizer.html, two unrelated meanings sharing one class name across the two adopting pages. cut-list-optimizer.html's meaning is renamed to `.tab-badge`; stackdesign-home.html keeps `.pill` for its own (the one this file's tokens are literally named after). TOKENS ONLY — this file declares no selector that paints an element. Every visual rule stays where the markup already is. A page adopts this component by rewriting ITS OWN existing selectors to read these custom properties, each with the page's original literal kept as the var() fallback — so a page never repaints if this file is ever missing or fails to load, and the piece ships with a hard "no measured change" guarantee instead of asking anyone to trust a diff. See: - modules/cut-list-optimizer/cut-list-optimizer.html's `.tab-badge` rule (the renamed tab-count meaning; mapping layer, source of the sm size tier) - stackdesign-home.html's `.pill` rule (the marketing feature-list chip; mapping layer, source of the md size tier) - docs/design-system/components/chip-pill.md and badge.md (the filled component pages) - tests/bws-chips.test.cjs (pins this file's own declared tokens, the two pages' mapping layers, the link include order, and the measured boundary contrast against a fixture parent in both themes) WHAT "NO MEASURED CHANGE" ACTUALLY MEANS HERE, STATED PLAINLY SO IT IS NEVER READ AS MORE THAN IT IS: the two controls this piece adopted - `.tab-badge` above and `.pill` above - keep their PRE-EXISTING, already-ratcheted look, unchanged, on purpose. Neither one consumes --chip-neutral-bg/-border/-fg, --chip-border-width or --chip-ring-inset (below); `.tab-badge`'s own background is a carried, under-3:1 offender in tests/control-surface-contrast-floor.json today, exactly as `.pill` (its collision partner) was before the rename, and this piece did not touch that number - fixing it would have been a real visual change, which this piece's own bar (zero measured change) rules out. The boundary/ring/neutral-variant tokens below exist for the NEXT chip - a future colour-coded variant, or a follow-up piece that gives `.tab-badge` its own real 3:1 fix - not for either control this piece shipped. That follow-up is filed separately (the records lane's job, not this commit's). Requires shared/theme.css to be linked first (for --accent/--gold/ --radius-pill/etc.). Link this file after theme.css (and after shared/bws-buttons.css where that file is also present) in every page's (docs/page-scaffold.html). WHY THIS FILE STAYS OUT OF THE PLACEMENT/GROUP/RUN COLOUR FAMILY. The Systainer planner's state-coloured chips (`.shelf-pref-chip`/ `.box-pri-pill`'s `chip-place-*`/`chip-group-*`/`chip-run-*` classes, modules/festool-systainer-cabinet-width/systainer-bank.html) are a distinct, already-built colour vocabulary with their own hue-separation floor (rules.md R-04/R-11) and their own live palette table (docs/design-system/stackdesign-placement-priority.md). systainer- bank.html is pinned/read-only for this piece, and that page's own comment trail already documents why (a light-anchor hue wheel that is fully packed, an inversion trick for the DARK tier). Migrating that family into this shared file is real, scoped work for a later piece, not a rename this one should absorb — see that doc's own note. This file's tokens cover the STRUCTURAL half every chip needs (size, boundary, motion, glyph spacing) plus the one NEUTRAL colour variant this piece actually ships; a page that needs a colour-coded state family keeps building it the way the planner already does, on top of these same structural tokens. ========================================================================== */ :root{ /* ---- Size scale: sm / md — padding, type, weight, radius ---- sm is HARVESTED from modules/cut-list-optimizer/cut-list-optimizer.html's shipped `.tab .pill` rule (now `.tab .tab-badge` — the collision this piece renames); md is HARVESTED from stackdesign-home.html's shipped `.pill` rule. Both are pre-existing, already-shipped literals, not invented numbers — the same "harvest the best existing pattern" rule shared/bws-buttons.css's own header documents. */ --chip-pad-y-sm: 1px; --chip-pad-x-sm: 8px; --chip-fs-sm: 0.7rem; --chip-weight-sm: 800; --chip-radius-sm: 999px; --chip-pad-y-md: 8px; --chip-pad-x-md: 15px; --chip-fs-md: 0.85rem; --chip-weight-md: 700; --chip-radius-md: var(--radius-pill, 999px); /* stackdesign-home.html's own `.pill` already reads var(--radius-pill, 999px) verbatim; kept as the same expression here so the fallback chain stays identical either way */ --chip-min-target: 24px; /* WCAG 2.2 SC 2.5.8 floor for an INTERACTIVE chip. Neither of this piece's two adopted controls is independently clickable today (the tab-badge lives inside its own already-24px+