/* E53.F9 — TCGM public-web theme (ADR 0040).
 *
 * Maps PicoCSS's theme variables onto the generated design tokens in
 * `/static/web/tokens.css` so the landing / sign-in / dashboard pages wear
 * the same warm-paper + terracotta language as the iOS/Android apps, with
 * light + dark. Single source of truth: the colours come from tokens.json
 * via tokens.css; here we only re-point Pico's variables at them.
 *
 * Why the mapping appears twice: the token references are identical in both
 * schemes (tokens.css already flips `--tcgm-color-*` for dark), but Pico's
 * own dark-scheme rules use the `:root:not([data-theme="light"])` selector,
 * which out-specifies a plain `:root`. So we re-assert the same mapping under
 * Pico's exact dark selector (and `[data-theme="dark"]`) — same specificity,
 * later source order — to win in dark mode too. */

:root,
[data-theme="dark"] {
  --pico-background-color: var(--tcgm-color-background);
  --pico-color: var(--tcgm-color-text);
  --pico-h1-color: var(--tcgm-color-text);
  --pico-h2-color: var(--tcgm-color-text);
  --pico-h3-color: var(--tcgm-color-text);
  --pico-h4-color: var(--tcgm-color-text);
  --pico-muted-color: var(--tcgm-color-text-muted);
  --pico-muted-border-color: var(--tcgm-color-line);

  --pico-card-background-color: var(--tcgm-color-surface-elevated);
  --pico-card-border-color: var(--tcgm-color-line);
  --pico-card-sectioning-background-color: var(--tcgm-color-surface);

  --pico-form-element-background-color: var(--tcgm-color-surface);
  --pico-form-element-border-color: var(--tcgm-color-line-strong);
  --pico-form-element-color: var(--tcgm-color-text);
  --pico-form-element-active-border-color: var(--tcgm-color-primary);

  /* Links/text use the AA-safe on-cream terracotta; buttons use the full
     primary with cream text. */
  --pico-primary: var(--tcgm-color-primary-on-cream);
  --pico-primary-hover: var(--tcgm-color-primary-pressed);
  --pico-primary-focus: var(--tcgm-color-primary-soft);
  --pico-primary-background: var(--tcgm-color-primary);
  --pico-primary-hover-background: var(--tcgm-color-primary-pressed);
  --pico-primary-border: var(--tcgm-color-primary);
  --pico-primary-hover-border: var(--tcgm-color-primary-pressed);
  --pico-primary-inverse: var(--tcgm-color-text-on-primary);

  --pico-border-radius: var(--tcgm-radius-md);
  /* Bundled OFL faces (E53, see fonts.css): Geist body, Instrument Serif
     headings; system fallbacks kept for resilience. */
  --pico-font-family: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pico-font-family-emphasis: "Instrument Serif", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pico-background-color: var(--tcgm-color-background);
    --pico-color: var(--tcgm-color-text);
    --pico-h1-color: var(--tcgm-color-text);
    --pico-h2-color: var(--tcgm-color-text);
    --pico-h3-color: var(--tcgm-color-text);
    --pico-h4-color: var(--tcgm-color-text);
    --pico-muted-color: var(--tcgm-color-text-muted);
    --pico-muted-border-color: var(--tcgm-color-line);

    --pico-card-background-color: var(--tcgm-color-surface-elevated);
    --pico-card-border-color: var(--tcgm-color-line);
    --pico-card-sectioning-background-color: var(--tcgm-color-surface);

    --pico-form-element-background-color: var(--tcgm-color-surface);
    --pico-form-element-border-color: var(--tcgm-color-line-strong);
    --pico-form-element-color: var(--tcgm-color-text);
    --pico-form-element-active-border-color: var(--tcgm-color-primary);

    /* In dark, the lifted dark primary already clears AA, so links use it. */
    --pico-primary: var(--tcgm-color-primary);
    --pico-primary-hover: var(--tcgm-color-primary-pressed);
    --pico-primary-focus: var(--tcgm-color-primary-soft);
    --pico-primary-background: var(--tcgm-color-primary);
    --pico-primary-hover-background: var(--tcgm-color-primary-pressed);
    --pico-primary-border: var(--tcgm-color-primary);
    --pico-primary-hover-border: var(--tcgm-color-primary-pressed);
    --pico-primary-inverse: var(--tcgm-color-text-on-primary);
  }
}

/* Headings use the signature display serif on the public surface too. */
h1, h2, h3 {
  font-family: var(--pico-font-family-emphasis);
  letter-spacing: -0.01em;
}

/* ---- TCGM-specific overrides (layered on top of Pico) ---- */

:root {
  --tcgm-spacing-base: 1rem;
  --tcgm-radius-base: var(--tcgm-radius-md);
}

article[data-testid="web-landing-card"] {
  margin-top: calc(var(--tcgm-spacing-base) * 2);
  border-radius: var(--tcgm-radius-base);
}

footer {
  margin-top: calc(var(--tcgm-spacing-base) * 4);
  text-align: center;
  opacity: 0.7;
}

/* Admin templates. Classes here replace inline `style="..."` so the
   web client can ship a strict Content-Security-Policy without
   needing `style-src 'unsafe-inline'`. */

/* Admin timeline editor's raw-JSON textarea. */
.tcgm-admin-timeline-textarea {
  font-family: var(--tcgm-font-mono, monospace);
  font-size: 0.9rem;
}

/* Inline-form layout used by the lesson-reorder up/down buttons —
   each tiny form sits inline next to the others. */
.tcgm-admin-inline-form {
  display: inline;
}