/* Shared tokens and base styles for every page. */
:root {
  --bg: #f4f7f2;
  --surface: #ffffff;
  --surface-2: #e9f1e8;
  --ink: #0f2419;
  --ink-2: #3d5a4a;
  --muted: #6b8577;
  --line: #d5e3d6;
  --accent: #17734a;
  --accent-ink: #ffffff;
  --accent-soft: #d6efdf;
  --accent-strong: #0d5a37;
  --shadow: 0 1px 2px rgb(15 36 25 / 6%), 0 8px 24px rgb(15 36 25 / 6%);
  --radius: 16px;
  --max: 1080px;
  --font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

/* Light is the default; dark only when chosen with the theme toggle (assets/theme.js). */
:root[data-theme="dark"] {
  --bg: #0a1510;
  --surface: #102019;
  --surface-2: #142a20;
  --ink: #e6f2ea;
  --ink-2: #b4cbbd;
  --muted: #81a090;
  --line: #1f3a2d;
  --accent: #4cd391;
  --accent-ink: #062314;
  --accent-soft: #163a29;
  --accent-strong: #7fe6b2;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
  color-scheme: dark;
}

/* Theme toggle button (used in every page header). */
.theme-toggle {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; cursor: pointer;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.header-actions { display: flex; align-items: center; gap: 12px; }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

@media (max-width: 600px) { .wrap { padding: 0 16px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}