/* ═══════════════════════════════════════════════════════════
   Design tokens — single source of truth
   Aesthetic: editorial reference manual, warm paper, ink-on-page
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Palette (OKLCH, warm-tinted neutrals biased toward amber 70°) */
  --page:           oklch(0.985 0.005 80);   /* warm paper cream */
  --paper:          oklch(0.995 0.003 80);   /* card surface, almost white */
  --paper-soft:     oklch(0.965 0.006 80);   /* recessed surface */

  --ink:            oklch(0.22 0.014 65);    /* primary text, warm near-black */
  --ink-strong:     oklch(0.16 0.018 65);    /* headings */
  --ink-muted:      oklch(0.46 0.013 70);    /* secondary text */
  --ink-faint:      oklch(0.62 0.010 70);    /* captions / metadata */
  --ink-ghost:      oklch(0.78 0.008 75);    /* placeholders / dividers */

  --rule:           oklch(0.91 0.008 75);    /* hairline borders */
  --rule-strong:    oklch(0.82 0.011 70);    /* hover borders */

  --accent:         oklch(0.62 0.13 70);     /* honey amber — used sparingly */
  --accent-deep:    oklch(0.50 0.14 60);     /* hover state */
  --accent-wash:    oklch(0.95 0.035 80);    /* pale amber background */
  --accent-ink:     oklch(0.38 0.12 60);     /* readable amber on light bg */

  /* Typography */
  --font-display:   'Source Serif 4', 'Iowan Old Style', 'Charter', Georgia, serif;
  --font-body:      'Hanken Grotesk', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spatial scale (4pt base) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;

  --measure-narrow: 38rem;
  --measure-text:   42rem;
  --measure-wide:   56rem;

  /* Shape */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    10px;

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur-base:   280ms;
  --dur-slow:   560ms;

  /* Elevation — almost invisible, just enough to lift paper */
  --shadow-xs: 0 1px 0 rgba(40, 28, 14, 0.04);
  --shadow-sm: 0 1px 2px rgba(40, 28, 14, 0.04), 0 0 0 1px rgba(40, 28, 14, 0.02);
  --shadow-md: 0 6px 24px -8px rgba(40, 28, 14, 0.08), 0 1px 2px rgba(40, 28, 14, 0.04);
}

/* ── Base reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--page);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-feature-settings: 'ss01', 'ss02';
  line-height: 1.55;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typographic primitives ─────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 36;
  color: var(--ink-strong);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
}

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

::selection {
  background: var(--accent-wash);
  color: var(--ink-strong);
}

/* ── Shared motion primitives ───────────────────────────────── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reduced motion — respect it everywhere ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}