sf-lwc-design: SLDS 2 Design System Foundation

Generate Lightning Web Components that are fully compliant with SLDS 2 (Salesforce Cosmos theme). All styling must use global styling hooks (--slds-g-*) — never hardcoded values.

Core Rules

1. Always use --slds-g-* CSS custom properties for colors, spacing, sizing, typography, shadows, and radii
2. Never hardcode hex colors, pixel sizes, or font stacks
3. Always provide fallback values in var() for resilience
4. Prefer lightning-* base components over custom HTML where available
5. Structure CSS with semantic intent, not visual description

SLDS 2 Architecture

SLDS 2 decouples structure (layout, spacing) from visual design (colors, radii, shadows). This enables theme switching (light/dark/custom) without component changes.