Lumina Per-Rune Redundant CSS Cleanup

Summary

Now that universal dimension CSS handles density, section anatomy, interactive state, media slots, and surface assignments generically, many per-rune CSS files in packages/lumina/styles/runes/ contain redundant rules that duplicate what the dimension layers provide. Audit each rune CSS file and remove rules that are now covered by the dimension CSS, keeping only rune-specific styling that can't be expressed generically.

Acceptance Criteria

• Each per-rune CSS file in packages/lumina/styles/runes/ audited against dimension CSS
• Redundant surface rules removed (background, border, border-radius, padding duplicating surfaces.css)
• Redundant section layout rules removed (header flex, title font-size, description color duplicating sections.css)
• Redundant density rules removed (compact/minimal overrides duplicating density.css)
• Redundant state rules removed (open/closed, active/inactive duplicating state.css)
• Rune-specific overrides preserved (unique layouts, custom structures, variant-specific styling)
• CSS coverage tests still pass after cleanup
• Visual regression check on site dev server confirms no breakage

Approach

1. For each rune CSS file, diff its selectors against the dimension CSS files
2. Remove rules where the dimension CSS provides identical or equivalent styling
3. Keep rules that are genuinely rune-specific (e.g., accordion's details/summary styling, tab bar layout, recipe meta grid)
4. Run CSS coverage tests after each batch of changes
5. Spot-check key runes in the dev server

References

• Lumina Universal Dimension CSS (Lumina Universal Dimension CSS)
• Universal Theming Dimensions (Universal Theming Dimensions)

Resolution

Completed: 2026-03-30

All per-rune CSS files audited against dimension CSS. Redundant surface, section layout, density, and state rules removed while preserving rune-specific overrides. CSS coverage tests pass. Implementation completed in commit 6dc9615 but work item was not previously marked done.