/* ============================================================================
   Base: reset + element defaults. Reads only from tokens.css.
   ============================================================================ */

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

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

body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--leading-normal);
  color: var(--ink);
  background-color: var(--paper);
  /* faint paper grain */
  background-image:
    radial-gradient(circle at 100% 0, rgba(197,149,90,0.05), transparent 38%),
    radial-gradient(circle at 0 100%, rgba(85,106,58,0.05), transparent 40%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Headings: serif display, tight, warm ink --- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: var(--leading-tight);
  color: var(--ink);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); font-weight: 600; }

p { margin-bottom: var(--s-3); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--sage-600);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--sage-700); text-decoration: underline; text-underline-offset: 2px; }

strong, b { font-weight: 650; color: var(--ink); }

small { font-size: var(--t-sm); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--sage-50);
  color: var(--sage-700);
  padding: 0.1em 0.4em;
  border-radius: var(--r-sm);
}

hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: var(--s-5) 0;
}

ul, ol { padding-left: var(--s-5); }
li { margin: var(--s-1) 0; }

img { max-width: 100%; height: auto; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: var(--ink);
}

::selection { background: var(--sage-100); color: var(--sage-900); }

/* --- Layout primitives --- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.container--narrow { max-width: var(--container-narrow); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.serif { font-family: var(--font-serif); }
.mono  { font-family: var(--font-mono); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* Tabular figures for any numeric column */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Visually-hidden (a11y) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* HTMX: subtle fade while a swap is in flight */
.htmx-indicator { opacity: 0; transition: opacity 0.2s ease; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }