Throw away the historical naming. New vocabulary chosen for clarity and
agentic-dev predictability: parts use hyphenated child classes
(.card-header), variant modifiers chain on the parent (.button.primary),
state stays on ARIA attributes. Variants compose via Tier-3
component-scoped tokens (--button-bg etc.) — .button.danger.outline is a
real outlined-danger button with no combination rule.
Adds toast, spinner, heading, app-header as first-class components.
Renames panel→card, modal→dialog, badge→tag; collapses state-* into tag
variants via ui.lifecycle_tag. Adds an explicit template-rewrite phase
in the migration plan, since every template's class attributes change.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the current ~1.4k LOC stylesheet with a tiered design system:
@layer-ordered cascade, two-tier tokens, budgeted component classes,
five high-leverage macros, in-app style guide, and the "system is closed"
workflow rule (every page element comes from the catalog).
Validated by a throwaway /spike comparing Pico v2, Simple.css, and the
pure-custom design; pure-custom won on the code-feel criterion the user
weighted highest.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
