Scope: variables.css, search.css, todo/04-accessibility.md
- variables.css: add @media (prefers-color-scheme: dark) block scoped to
body:not(.admin-body); overrides all semantic tokens with dark equivalents:
--bg-* (#111→#333 range), --text-* (#eee/aaa/777),
--border-* (#333/#444), --accent-primary lightened to #b87fd4
(4.5:1 contrast on #111 background), --accent-secondary stays #9557b5,
--accent-foreground flipped to #111111 for dark buttons,
--accent-muted adjusted to rgba(184,127,212,0.15),
status colours muted for dark (success #4db886, error #e05555,
warning #d4a830); new --search-error-{bg,border,color} tokens added
to :root (light: #fff0f0/#c00) and overridden in dark (#2a1515/#e05555)
- search.css: replace three hardcoded hex values in .search-error rule
with var(--search-error-bg/border/color) so dark mode applies cleanly
- Admin pages are entirely unaffected: .admin-body body class is excluded
from the dark-mode selector; system.css already has its own dark palette
Replace 6 CSS class selectors across tfe.css, main.css, and search.css with
semantic element-based selectors, removing the corresponding classes from the
HTML templates entirely.
tfe.css:
- .tfe-meta-list → article dl / article dl > div / article dl dt / article dl dd
- .tfe-media-block → aside figure (+ img, video, embed children)
- .tfe-file-caption → aside figcaption
main.css:
- .card__media → .home-body figure (+ img/video children and hover/motion rules)
- .card__caption → .home-body li > a > p
search.css:
- .repertoire-col > h2 → .repertoire-index section > h2
Template changes:
- tfe.php: removed class= from <dl>, <figure>, and <figcaption>
- index.php: removed class= from <figure> and <p class=card__caption>;
stripped orphaned card__media from the gradient <div> (only --gradient needed)
No visual change — selectors match the same elements as before since the
semantic HTML was already in place from prior refactoring work.
