/* =========================================================================
   Neft Teacher — Theme Contract (light/dark)
   -------------------------------------------------------------------------
   Drop-in CSS variables consumed by all Neft Teacher pages (activities,
   webquests, hyperdocs). Pair with neft-theme.js, which sets
   document.documentElement.dataset.theme = 'light' | 'dark'.

   HOW A PAGE OPTS IN
     1. <link rel="stylesheet" href="/assets/neft-theme.css">
     2. <script src="/assets/neft-theme.js" defer></script>
     3. Style your page using the --nt-* variables below (never hard-code
        colors). Example:
            body      { background: var(--nt-bg);     color: var(--nt-text); }
            .card     { background: var(--nt-surface); border: 1px solid var(--nt-border); }
            .muted    { color: var(--nt-muted); }
            a, .accent{ color: var(--nt-accent); }

   VARIABLE CONTRACT (available in both themes)
     --nt-bg       page background
     --nt-surface  cards / panels / raised areas
     --nt-text     primary text (AA contrast on --nt-bg & --nt-surface)
     --nt-muted    secondary / helper text (AA contrast)
     --nt-accent   links, buttons, highlights
     --nt-border   hairlines, dividers, input borders
     --nt-focus    focus-ring color
   ========================================================================= */

:root[data-theme="light"] {
  --nt-bg: #f7f8fa;
  --nt-surface: #ffffff;
  --nt-text: #16202c; /* ~13:1 on bg */
  --nt-muted: #4a5663; /* ~7:1  on bg */
  --nt-accent: #1257b8; /* ~5.6:1 on surface */
  --nt-border: #d4dae1;
  --nt-focus: #1257b8;
}

:root[data-theme="dark"] {
  --nt-bg: #11161c;
  --nt-surface: #1b232d;
  --nt-text: #eef2f6; /* ~14:1 on bg */
  --nt-muted: #aab6c2; /* ~7.2:1 on bg */
  --nt-accent: #6fb3ff; /* ~7:1  on surface */
  --nt-border: #313c48;
  --nt-focus: #6fb3ff;
}

/* Fallback before JS runs / if dataset.theme is unset → light. */
:root:not([data-theme="dark"]) {
  --nt-bg: #f7f8fa;
  --nt-surface: #ffffff;
  --nt-text: #16202c;
  --nt-muted: #4a5663;
  --nt-accent: #1257b8;
  --nt-border: #d4dae1;
  --nt-focus: #1257b8;
}

/* Smooth theme transition (respect reduced-motion). */
html,
body,
.nt-theme-aware {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .nt-theme-aware,
  .nt-theme-toggle {
    transition: none;
  }
}

/* ---- Injected toggle button ---- */
.nt-theme-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  color: var(--nt-text);
  background: var(--nt-surface);
  border: 1px solid var(--nt-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.12s ease;
}
.nt-theme-toggle:hover {
  transform: scale(1.06);
}
.nt-theme-toggle:active {
  transform: scale(0.96);
}
.nt-theme-toggle:focus-visible {
  outline: 3px solid var(--nt-focus);
  outline-offset: 2px;
}

/* Generic, opt-in focus ring for page interactive elements. */
.nt-theme-aware
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--nt-focus);
  outline-offset: 2px;
}