Surface tones, orange badge, kicker-blue, dark-surface contrast fixes, showcase headings

[lumpster-csa]

Summary

Seven small, independent changes, one commit each so they can be reviewed (or reverted) separately:

• Action tile — border-left-width added to .csa-action's transition list, so the selected state's 1px → 4px left border animates in with the color change instead of snapping.
• .csa-hr — dark (b600) and black (n700) variants. The plain n50 rule was nearly invisible on dark surfaces.
• .csa-kicker-blue — a color-only modifier combined with .csa-kicker or .csa-kicker-sub: b500 on light/gradient, b200 on dark/black. Not wired into .csa-hero/.csa-cta, whose always-dark kicker colors override it by design.
• Surface tones (data-tone) — an optional second attribute that nudges a surface one step without becoming a new surface, so every existing data-surface rule keeps applying:
  • data-surface="light" data-tone="neutral": n25 band, white cards. .csa-bg-n25 stays as an alias and now sets the band color itself instead of needing an inline background.
  • data-surface="dark" data-tone="deep": b800 band, b700 cards. The progress track, toggle tracks, and disabled pagination fills step up to b700 on deep so they don't vanish into the band.
• Contrast on dark surfaces — blue tag text and .csa-badge-outlined text were b300, only ~3.3:1 against the dark b700 surface (AA needs 4.5:1). Both now use b100 on dark and black (5.2:1 at rest), and the outlined dark demos use the b100 calendar icon.
• .csa-badge-orange — light surfaces: solid o700 pill, o600 border, white text and icon. Dark and black: o400 at 20% fill, o400 border, o200 text and icon. Like Secondary, it also covers the always-dark .csa-hero/.csa-cta and restores the light treatment in .csa-hero-light. Adds src/assets/icons/o200/ — 120 icons recolored from the o300 set to #FFB833.
• Showcase headings — heading styles are scoped to .csa-title/.csa-subtitle, so the showcase page's bare h1–h4 were rendering with browser defaults (section titles at 24px, weight 700, gray). All bare headings now carry csa-title.

Showcase demos and README entries are included for the tones, kicker modifier, and orange badge.

Test plan

• Served src/docs/index.html locally and checked computed styles for each change:
  • Action: border-left-width animates 1px → 2.5px → 4px over ~0.15s on selection
  • .csa-hr computes n50 / b600 / n700 on light / dark / black
  • .csa-kicker-blue computes b500 on light and gradient, b200 on dark and black; plain kickers unchanged
  • Tones: neutral and the .csa-bg-n25 alias render identically (n25 band, white card, n50 tag); deep gives b800 band with b700 card, progress track, and disabled pagination
  • Blue tag and outlined badge compute b100 on dark and black
  • Orange badge computes the specified values on light, dark, and black; all new icons load
  • Showcase headings: compared computed styles before and after (headings now match the library's heading rules)
• Reviewer: the new o200/ icons are generated by recoloring o300, so a quick visual skim of a few would be welcome

🤖 Generated with Claude Code