/* Shared tokens: page styles must never define their own palettes. */
:root, :root[data-theme="paper"] {
  color-scheme: light;

  --paper: #f7f3ed;
  --ink: #211c18;
  --muted: #6b6056;
  --line: #ded4c8;
  --card: #ffffff;
  --surface-alt: #eee6dc;
  --accent: #79543b;
  --accent-hover: #593c29;
  --on-accent: #ffffff;
  --accent-soft: #ede0d2;
  --success: #79543b;
  --success-soft: #ede0d2;
  --danger-soft: #f5e6dd;
  --diagram: #211c18;
  --diagram-surface: #3d3027;
  --diagram-ink: #ffffff;
  --diagram-muted: #ddd0c2;
}

:root[data-theme="midnight"] {
  color-scheme: dark;

  --paper: #1d1916;
  --ink: #f4eee7;
  --muted: #c5b8aa;
  --line: #55483d;
  --card: #28221d;
  --surface-alt: #342b24;
  --accent: #d8b596;
  --accent-hover: #ead0b8;
  --on-accent: #211a14;
  --accent-soft: #403025;
  --success: #d8b596;
  --success-soft: #403025;
  --danger-soft: #49342d;
  --diagram: #14110f;
  --diagram-surface: #342b24;
  --diagram-ink: #f4eee7;
  --diagram-muted: #c5b8aa;
}

:root[data-theme="contrast"] {
  color-scheme: dark;

  --paper: #000000;
  --ink: #ffffff;
  --muted: #eeeeee;
  --line: #ffffff;
  --card: #000000;
  --surface-alt: #161616;
  --accent: #ffff00;
  --accent-hover: #ffffff;
  --on-accent: #000000;
  --accent-soft: #262600;
  --success: #ffff00;
  --success-soft: #262600;
  --danger-soft: #3b1d1d;
  --diagram: #000000;
  --diagram-surface: #242424;
  --diagram-ink: #ffffff;
  --diagram-muted: #eeeeee;
}

/* Legacy learning components consume the same semantic palette. */
:root {
  --orange: var(--accent);
  --orange-soft: var(--accent-soft);
  --teal: var(--success);
  --teal-soft: var(--success-soft);
  --bad: var(--danger-soft);
  --body-font: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
  --heading-font: georgia, "Times New Roman", serif;
}

:where(a, button, input, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Shared reading typography across the journal and learning sites. */
body {
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.65;
}

h2, h3, h4 {
  font-family: var(--body-font);
  font-weight: 600;
}

button.theme-toggle {
  font: 500 13px/1.4 var(--body-font);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  white-space: nowrap;
  cursor: pointer;
  letter-spacing: normal;
}

button.theme-toggle:hover {
  border-color: var(--accent);
}