[feril3]

Phase 6B — Contrast + Visual Tokens + State Clarity

This phase addresses the washed-out controls and ambiguous states identified in the screenshot audit. It intentionally avoids page-level layout/density changes reserved for Phase 6C.

Tokens

• slightly ground the app background
• darken muted foreground text
• strengthen structural border color
• raise input/control boundary contrast
• strengthen focus ring
• add semantic success/danger surface tokens
• strengthen sidebar separators

Primitive clarity

• Inputs, Textarea, InputGroup and Select get visible control boundaries, hover and focus states
• Outline buttons now use control-border contrast instead of generic card borders
• Cards get restrained elevation and stronger separation
• Table header and row hover hierarchy are clearer
• Toggle selected state gets explicit border/background/text emphasis
• Switch off/on states are visually distinct
• Badge and Alert success/destructive states get explicit semantic borders and backgrounds
• Settings navigation selected state gets a persistent primary inset marker

Cascade fix

• replace the broad .dashboard-shell * border rule with zero-specificity :where(.dashboard-shell *)
• semantic utilities such as border-input, border-destructive, and border-primary can now override the fallback as intended

Regression

• calculate WCAG-style contrast in tests
• require input boundary >= 3:1 against card
• require muted foreground >= 4.5:1 against app background
• lock visible hover/focus/selected-state primitives

No Phase 6C page layout changes are included.