/* Loaded after each surface's dark defaults. Only an explicit preference opts in. */
:root[data-theme="light"], :root[data-theme="light"] .journal-home {
  color-scheme: light;
  --bg: #f6f7f5;
  --background: #f6f7f5;
  --surface: #edf0ee;
  --border: #c8d0cd;
  --text: #1c272c;
  --text-strong: #111c22;
  --secondary: #43525b;
  --muted: #596870;
  --accent: #08796f;
  --term-green: #286c3b;
  --term-yellow: #80600b;
  --term-blue: #2368a3;
  --term-purple: #7550a2;
  --term-red: #b04146;
  --term-orange: #a34e17;
  --header-bg: #f6f7f5f5;
  --header-border: #1c272c14;
  --hover-mix: #111c22;
  --welcome-bg: #f6f7f5;
  --code-bg: #e8eeeb;
  --code-text: #243c43;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 92px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text);
  font: 500 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  cursor: pointer;
}
.theme-toggle[hidden] { display: none !important; }
.journal-home .theme-toggle { font: 500 12px/1.5 var(--mono); }
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.mobile-menu .theme-toggle { align-self: flex-start; margin-top: 24px; }
.site-nav { align-items: center; }
@media (max-width: 620px) {
  .nav { grid-template-columns: 1fr auto auto; column-gap: 12px; }
  .nav > .theme-toggle { grid-column: 3; grid-row: 1; }
}

/* Color-only transitions; existing layout and motion remain owned by each surface. */
body, .journal-header, .site-header, .mobile-menu, .theme-toggle,
.login-panel, .login-form input, .login-form button, .login-error,
.article-body pre, .article-body code, .code-block {
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
@media (prefers-reduced-motion: reduce) {
  body, .journal-header, .site-header, .mobile-menu, .theme-toggle,
  .login-panel, .login-form input, .login-form button, .login-error,
  .article-body pre, .article-body code, .code-block { transition: none; }
}