/* Theme surfaces and text must change together, including legacy card variants. */
html[data-theme] {
  --on-accent: #ffffff;
  --status-text: #854019;
  --status-surface: #fff1e6;
}
html[data-theme="midnight"] {
  --on-accent: #101b2b;
  --status-text: #ffd3b3;
  --status-surface: #34271f;
}
html[data-theme="editorial"] {
  --status-text: #763713;
  --status-surface: #f7e8d7;
}
html[data-theme] :is(.signal-card,.service-card,.skills-grid article,.credential-history,.credential-group,.platform-grid article,.career-grid article,.work-grid article,.product-card) {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme] :is(.service-card,.skills-grid article,.credential-history,.credential-group,.platform-grid article,.career-grid article,.work-grid article) :is(p,li,small,.fit),
html[data-theme] .signal-row small,
html[data-theme] .signal-note,
html[data-theme] .product-copy > p:not(.card-label):not(.product-price),
html[data-theme] .product-copy :is(ul,li),
html[data-theme] .product-price span {
  color: var(--secondary);
}
html[data-theme] :is(.service-card,.skills-grid article,.credential-history,.credential-group,.platform-grid article,.career-grid article,.work-grid article,.product-copy) :is(h3,h4,b),
html[data-theme] .product-price { color: var(--text); }
html[data-theme] :is(.service-card,.skills-grid article,.credential-history,.credential-group,.platform-grid article,.career-grid article,.work-grid article,.product-copy) .card-label,
html[data-theme] :is(.text-link,.profile-links a,.skills-grid a,.fit b) { color: var(--accent); }
html[data-theme] .credential-state.expired {
  color: var(--status-text);
  background: var(--status-surface);
}
html[data-theme] .button.primary,
html[data-theme] .button.primary:hover {
  color: var(--on-accent);
  background: var(--accent);
  filter: none;
}
html[data-theme] .button.ghost { color: var(--text); background: var(--surface); }
html[data-theme] .button.ghost:hover { color: var(--accent); border-color: var(--accent); }
html[data-theme] nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }
html[data-theme] :is(.service-card li,.skills-grid li,.credential-list li) { border-color: var(--border); }
/* The book jacket is deliberately dark in every theme; keep its own light ink. */
html[data-theme] .product-cover { color: #f5f6f7; background-color: #151719; }