/* Theme (light) — loaded after themes.css so these override firm dark tokens where listed */
:root[data-theme="light"] {
  --wf-color-bg: #f2efe8;
  --wf-color-surface: #ffffff;
  --wf-color-surface-alt: #f7f4ed;
  --wf-color-text: #1a1814;
  --wf-color-text-muted: rgba(26, 24, 20, 0.68);
  --wf-color-heading: #3d3428;
  --wf-color-border: rgba(26, 24, 20, 0.12);
  --wf-color-accent-soft: rgba(26, 24, 20, 0.06);
  --wf-primary-border: color-mix(in srgb, var(--wf-firm-accent) 35%, rgba(26, 24, 20, 0.15));
  --wf-secondary-button-border: rgba(26, 24, 20, 0.18);
  --wf-body-glow-top: color-mix(in srgb, var(--wf-firm-accent) 12%, transparent);
  --wf-body-gradient-end: #ebe6dc;
  --wf-shadow-md: 0 8px 28px rgba(26, 24, 20, 0.08);
  --wf-launch-glow-1: color-mix(in srgb, var(--wf-firm-accent) 10%, transparent);
  --wf-launch-glow-2: rgba(26, 24, 20, 0.04);
  --wf-launch-cta-border: color-mix(in srgb, var(--wf-firm-accent) 40%, rgba(26, 24, 20, 0.2));
}

/* Stronger contrast for inbox arrival / alerts on light backgrounds */
:root[data-theme="light"] .wf-alert {
  background: #fff5d6;
  border-color: rgba(26, 24, 20, 0.18);
  border-left: 6px solid var(--wf-color-primary);
  color: var(--wf-color-text);
}
:root[data-theme="light"] .wf-alert-title {
  color: var(--wf-color-text);
}
:root[data-theme="light"] .wf-incoming-notice {
  background: #fff5d6;
  border-color: var(--wf-color-primary);
  color: var(--wf-color-text);
}
:root[data-theme="light"] .wf-mail-item.is-unread {
  background: #fff5d6;
  border-color: var(--wf-color-primary);
}

:root[data-theme="light"] .wf-button-primary:hover {
  color: var(--wf-color-primary-contrast);
}

/* Dyslexia-friendly font stack (Atkinson Hyperlegible loaded in index.html) */
:root[data-dyslexic="true"] {
  --wf-font-body: "Atkinson Hyperlegible", "OpenDyslexic", "Lexie Readable", "Comic Sans MS", ui-sans-serif, system-ui, sans-serif;
  --wf-font-heading: "Atkinson Hyperlegible", "OpenDyslexic", "Lexie Readable", "Comic Sans MS", ui-sans-serif, system-ui, sans-serif;
}

/* Assessment header: theme + dyslexia controls */
.wf-header-controls {
  grid-area: controls;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wf-space-2);
}

.wf-header-controls .wf-btn-compact {
  padding: 8px 12px;
  font-size: 0.85rem;
  border-radius: var(--wf-radius-sm);
  border: var(--wf-border-width) solid var(--wf-secondary-button-border);
  background: var(--wf-color-surface-alt);
  color: var(--wf-color-text);
  cursor: pointer;
}

.wf-header-controls .wf-btn-compact:hover {
  border-color: var(--wf-color-primary);
  color: var(--wf-color-heading);
}

.wf-dyslexia-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--wf-color-text-muted);
  cursor: pointer;
  user-select: none;
}

.wf-dyslexia-toggle input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--wf-color-primary);
}

@media (max-width: 760px) {
  .wf-header-controls {
    justify-content: flex-start;
  }
}