/* AIXOSQuiz Theme layer — Phase 0
 * Transitions, color-scheme helpers, toggle chrome, code-block invariants.
 * Does not redesign layouts. Page-specific color migration is later phases. */

/* Native form controls follow active theme */
:root,
[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="light"] {
  color-scheme: light;
}

/* Smooth theme switches after first paint (FOUC script omits this class) */
@media (prefers-reduced-motion: no-preference) {
  :where(
    html.theme-transitions-ready body,
    html.theme-transitions-ready body [class],
    html.theme-transitions-ready body a,
    html.theme-transitions-ready body button,
    html.theme-transitions-ready body input,
    html.theme-transitions-ready body textarea,
    html.theme-transitions-ready body select,
    html.theme-transitions-ready body option,
    html.theme-transitions-ready body th,
    html.theme-transitions-ready body td
  ) {
    transition:
      background-color var(--duration-theme, 220ms) var(--ease-theme, var(--ease-out, ease)),
      color var(--duration-theme, 220ms) var(--ease-theme, var(--ease-out, ease)),
      border-color var(--duration-theme, 220ms) var(--ease-theme, var(--ease-out, ease)),
      box-shadow var(--duration-theme, 220ms) var(--ease-theme, var(--ease-out, ease)),
      outline-color var(--duration-theme, 220ms) var(--ease-theme, var(--ease-out, ease)),
      fill var(--duration-theme, 220ms) var(--ease-theme, var(--ease-out, ease)),
      stroke var(--duration-theme, 220ms) var(--ease-theme, var(--ease-out, ease));
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    html.theme-transitions-ready body,
    html.theme-transitions-ready body [class],
    html.theme-transitions-ready body a,
    html.theme-transitions-ready body button,
    html.theme-transitions-ready body input,
    html.theme-transitions-ready body textarea,
    html.theme-transitions-ready body select,
    html.theme-transitions-ready body option,
    html.theme-transitions-ready body th,
    html.theme-transitions-ready body td
  ) {
    transition: none !important;
  }
}

/* Fenced / terminal code — always dark terminal in every theme */
[data-theme] pre,
[data-theme] pre code,
[data-theme] .code-terminal pre,
[data-theme] .hljs {
  background-color: var(--color-code-block-bg);
  color: var(--color-code-block-text);
}

/* -------------------------------------------------------------------------- */
/* Theme toggle — shared control (wired in Phase 1 nav; usable anywhere now)  */
/* -------------------------------------------------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-small, 10px);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background-color var(--duration-theme, 220ms) var(--ease-theme, ease),
    color var(--duration-theme, 220ms) var(--ease-theme, ease),
    border-color var(--duration-theme, 220ms) var(--ease-theme, ease),
    transform var(--duration-theme, 220ms) var(--ease-theme, ease);
}

.theme-toggle:hover {
  color: var(--color-heading);
  background: var(--color-surface-hover);
  border-color: var(--color-border-accent);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.theme-toggle:active {
  transform: scale(0.96);
}

.theme-toggle__icon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.theme-toggle [data-theme-icon="sun"],
.theme-toggle [data-theme-icon="moon"] {
  display: none;
}

[data-theme="dark"] .theme-toggle [data-theme-icon="sun"] {
  display: block;
}

[data-theme="light"] .theme-toggle [data-theme-icon="moon"] {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle:active {
    transform: none;
  }

  .nav-toggle span,
  .nav-links a,
  .nav-cta,
  .brand-logo {
    transition: none !important;
  }
}