The three tiers had collapsed to one identical value (#5e6a78 / #9fadbe),
so hints, metadata, timestamps and placeholders were all indistinguishable.
Re-separate them into three perceptibly distinct steps, each verified WCAG
AA >=4.5:1 on every page/surface/hover/muted background in both light and
dark mode. Emphasis maps to contrast: muted is strongest (general secondary
text), faint the weakest (timestamps/placeholders) sitting on the AA floor;
secondary stays clearly stronger than all three. The dark floor is binding,
so the dark steps separate upward (lighter = more emphasis).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013J5koaCrHDMvS7uwpawLBN
- About modal overlay used a raw z-index: 1200, below the semantic
--z-modal (3000)/--z-toast (4000) layers, so token-based surfaces would
cover it. Consume var(--z-modal) instead.
- .btn-primary and .search-button sit on the accent gradient but coloured
their text with --color-danger-text (only correct by coincidence, #fff).
Use the purpose-built --color-on-accent so retinting danger can't break
them. The other --color-danger-text uses are white-on-red and stay.
- --color-item-hover-blue/--color-item-hover-sky were light-only literals
that would read wrong in dark mode; wrap them in light-dark().
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013J5koaCrHDMvS7uwpawLBN
Claude