/* ─── Self-hosted fonts ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/merriweather-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/merriweather-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/dm-mono-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/dm-mono-latin-500-normal.woff2) format('woff2');
}

/* ─── Design tokens ──────────────────────────────────────────────────── */
:root {
  --bg:            #f7f3ec;
  --panel:         #fffdf7;
  --card:          #ffffff;
  --border:        #e6dfcf;
  --border-strong: #d6caa9;
  --muted-bg:      #f7f3ec;

  --ink:   #2a2620;
  --ink-2: #5a544a;
  --ink-3: #6b6359;

  --sage:      #6b8a6f;
  --sage-deep: #3a5a3f;
  --sage-bg:   #e8efe6;

  --terra:      #a8543a;
  --terra-deep: #7a3520;
  --terra-bg:   #f5e2d2;

  --link: #3a5a3f;

  --font-body:    'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  --font-display: 'Merriweather', Georgia, serif;
  --font-mono:    'DM Mono', ui-monospace, monospace;

  --r-sm:     7px;
  --r-md:     10px;
  --r-lg:     12px;
  --r-xl:     14px;
  --r-canvas: 18px;
  --r-pill:   22px;

  --sh-card:    0 4px 16px rgba(40,38,32,0.06);
  --sh-canvas:  0 4px 24px rgba(40,38,32,0.04);
  --sh-popover: 0 10px 28px rgba(40,38,32,0.18);
  --sh-cta:     0 2px 8px rgba(58,90,63,0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #171512;
    --panel:         #1f1d17;
    --card:          #272419;
    --border:        #3c3628;
    --border-strong: #514939;
    --muted-bg:      #272419;

    --ink:   #ede8dc;
    --ink-2: #b5ad99;
    --ink-3: #9a9080;

    --sage:      #7aaa80;
    --sage-deep: #4e8255;
    --sage-bg:   #1d2c1f;

    --terra:      #c96b4a;
    --terra-deep: #e07858;
    --terra-bg:   #2c1a12;

    --link: #7aaa80;

    --sh-card:    0 4px 16px rgba(0,0,0,0.45);
    --sh-canvas:  0 4px 24px rgba(0,0,0,0.55);
    --sh-popover: 0 10px 28px rgba(0,0,0,0.65);
    --sh-cta:     0 2px 8px rgba(78,130,85,0.4);
  }
}
[data-theme="dark"] {
  --bg:            #171512;
  --panel:         #1f1d17;
  --card:          #272419;
  --border:        #3c3628;
  --border-strong: #514939;
  --muted-bg:      #272419;

  --ink:   #ede8dc;
  --ink-2: #b5ad99;
  --ink-3: #9a9080;

  --sage:      #7aaa80;
  --sage-deep: #4e8255;
  --sage-bg:   #1d2c1f;

  --terra:      #c96b4a;
  --terra-deep: #e07858;
  --terra-bg:   #2c1a12;

  --link: #7aaa80;

  --sh-card:    0 4px 16px rgba(0,0,0,0.45);
  --sh-canvas:  0 4px 24px rgba(0,0,0,0.55);
  --sh-popover: 0 10px 28px rgba(0,0,0,0.65);
  --sh-cta:     0 2px 8px rgba(78,130,85,0.4);
}
[data-theme="light"] {
  --bg:            #f7f3ec;
  --panel:         #fffdf7;
  --card:          #ffffff;
  --border:        #e6dfcf;
  --border-strong: #d6caa9;
  --muted-bg:      #f7f3ec;

  --ink:   #2a2620;
  --ink-2: #5a544a;
  --ink-3: #6b6359;

  --sage:      #6b8a6f;
  --sage-deep: #3a5a3f;
  --sage-bg:   #e8efe6;

  --terra:      #a8543a;
  --terra-deep: #7a3520;
  --terra-bg:   #f5e2d2;

  --link: #3a5a3f;

  --sh-card:    0 4px 16px rgba(40,38,32,0.06);
  --sh-canvas:  0 4px 24px rgba(40,38,32,0.04);
  --sh-popover: 0 10px 28px rgba(40,38,32,0.18);
  --sh-cta:     0 2px 8px rgba(58,90,63,0.3);
}

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

/* ─── Base ───────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  background: var(--bg);
  color: var(--ink);
  padding: 48px 24px 80px;
}
a { color: var(--link); }

/* ─── Logo switching ─────────────────────────────────────────────────── */
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark  { display: block; }
}
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark  { display: block; }

/* ─── Shared doc-page layout ─────────────────────────────────────────── */
.wrap { max-width: 680px; margin: 0 auto; }
.back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--ink-2); text-decoration: none;
  margin-bottom: 32px;
}
.back:hover { color: var(--ink); }
h1 {
  font-family: var(--font-display); font-size: 32px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2;
  color: var(--ink); margin-bottom: 8px;
}
.meta { font-size: 13px; color: var(--ink-2); margin-bottom: 40px; }
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 32px 36px; margin-bottom: 20px;
}
h2 {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  color: var(--ink); margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
p { margin-bottom: 14px; }
p:last-child { margin-bottom: 0; }
ul { padding-left: 20px; margin-bottom: 14px; }
li { margin-bottom: 6px; }