/* Design tokens — palette and type sampled from the brand sheet (NewScheme).
   Components read semantic aliases only (--surface-card, --text-link), never raw hexes,
   which is what makes the cream/green theme flip total. */

/* ── tokens/fonts.css ───────────────────────────────── */
/* Webfonts, Google Fonts CDN. EB Garamond sets the display and prose voice of the brand
   sheet; Jost carries the letterspaced small-caps labels; IBM Plex Mono holds numerals. */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");


/* ── tokens/colors.css ───────────────────────────────── */
:root{
  /* Brand hues — sampled from the palette row of the brand sheet */
  --brand-cream:#E8E0D2;
  --brand-green:#273E34;
  --brand-teal:#527D73;
  --brand-copper:#A9583F;
  --brand-lavender:#8B7D91;
  --brand-ink:#292C2B;
  --brand-gold:#C69A4B;

  /* Paper — the cream ground, stepped at constant hue */
  --paper-000:#FCFAF6;
  --paper-050:#F7F3EB;
  --paper-100:#F1EBE0;
  --paper-200:#E8E0D2;
  --paper-300:#DCD1BE;
  --paper-400:#C9BBA2;
  --paper-500:#B0A088;
  --paper-600:#8C8172;

  /* Green — the ink ground */
  --green-900:#16211C;
  --green-800:#1D2E27;
  --green-700:#273E34;
  --green-600:#31503F;
  --green-500:#3E6350;

  /* Teal */
  --teal-700:#3B5C54;
  --teal-600:#46695F;
  --teal-500:#527D73;
  --teal-400:#6E958B;
  --teal-300:#9BB6AE;
  --teal-100:#D9E4E0;

  /* Copper — the action accent */
  --copper-800:#6F3626;
  --copper-700:#8A452F;
  --copper-600:#9A4E36;
  --copper-500:#A9583F;
  --copper-400:#C07458;
  --copper-300:#D89C84;
  --copper-100:#F0DDD3;

  /* Gold + lavender — the quiet fourth and fifth hues */
  --gold-700:#8E6A2C;
  --gold-600:#A87F35;
  --gold-500:#C69A4B;
  --gold-300:#E0C48A;
  --lavender-700:#5E5265;
  --lavender-600:#6F6275;
  --lavender-500:#8B7D91;
  --lavender-300:#B7ACBB;

  /* Warm neutrals for text and rules */
  --ink-900:#292C2B;
  --ink-700:#3D4441;
  --ink-500:#5E6A62;
  --ink-400:#7C857D;

  /* ── Semantic: surfaces. CREAM IS THE DEFAULT; opt into the green ground
     with data-theme="dark". Cream is the mark's native paper. ── */
  --surface-page:var(--paper-200);
  --surface-sunken:var(--paper-300);
  --surface-card:var(--paper-050);
  --surface-inset:var(--paper-100);
  --surface-inverse:var(--green-700);
  --surface-demo:var(--green-900);

  --text-body:var(--ink-700);
  --text-heading:var(--green-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-inverse:var(--paper-050);
  --text-link:var(--copper-600);
  --text-link-hover:var(--copper-800);
  --text-link-visited:var(--copper-700);

  --border-hairline:#D3C7B2;
  --border-default:#C0B199;
  --border-strong:#A2937B;
  --border-focus:var(--copper-600);

  --action-primary:var(--green-700);
  --action-primary-hover:var(--green-600);
  --action-accent:var(--copper-500);
  --action-accent-hover:var(--copper-700);
  --action-quiet-hover:var(--paper-100);

  --status-positive:var(--teal-600);
  --status-info:var(--teal-500);
  --status-note:var(--lavender-500);
  --status-alert:var(--copper-500);

  /* The mark, so it flips with the ground */
  --mark-ring:var(--green-700);
  --mark-ring-alt:var(--teal-500);
  --mark-branch:var(--green-700);
  --mark-node:var(--green-700);
  --mark-root:var(--copper-500);

  /* Accent aliases — the hue vocabulary used by content front matter
     (`accent: copper`, `tone: teal`, `hue: gold`). These flip with the theme so a
     hue named in a data file stays legible on either ground. */
  --accent-copper:var(--copper-600);
  --accent-green:var(--green-600);
  --accent-teal:var(--teal-600);
  --accent-gold:var(--gold-700);
  --accent-lavender:var(--lavender-600);
  --accent-neutral:var(--text-muted);

  /* Data-viz series order — green, copper, teal, gold, lavender */
  --series-1:var(--green-600);
  --series-2:var(--copper-500);
  --series-3:var(--teal-500);
  --series-4:var(--gold-500);
  --series-5:var(--lavender-500);

  /* The topographic contour motif from the brand sheet, as a repeating background */
  --pattern-topo:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%23273E34' stroke-opacity='.10'%3E%3Cpath d='M-10 96c40-4 62-30 108-30s72 26 152 20'/%3E%3Cpath d='M-10 78c44-6 66-28 112-28s70 24 148 18'/%3E%3Cpath d='M-10 60c48-8 70-26 116-26s68 22 144 16'/%3E%3Cpath d='M-10 42c52-10 74-24 120-24s66 20 140 14'/%3E%3Cpath d='M-10 24c56-12 78-22 124-22s64 18 136 12'/%3E%3C/g%3E%3C/svg%3E");
}

/* Dark theme — the deep-green ground of the poster and the reversed mark. */
[data-theme="dark"]{
  --surface-page:var(--green-800);
  --surface-sunken:var(--green-900);
  --surface-card:#243830;
  --surface-inset:var(--green-700);
  --surface-inverse:var(--paper-050);
  --surface-demo:#111A16;

  --text-body:#E2DDD0;
  --text-heading:var(--paper-050);
  --text-muted:#AEB8AE;
  --text-faint:#8B978E;
  --text-inverse:var(--green-800);
  --text-link:var(--copper-300);
  --text-link-hover:var(--gold-300);
  --text-link-visited:var(--copper-400);

  --border-hairline:#31463C;
  --border-default:#3E564A;
  --border-strong:#55705F;
  --border-focus:var(--gold-500);

  --action-primary:var(--teal-500);
  --action-primary-hover:var(--teal-400);
  --action-accent:var(--copper-400);
  --action-accent-hover:var(--copper-300);
  --action-quiet-hover:var(--green-700);

  --status-positive:var(--teal-400);
  --status-info:var(--teal-300);
  --status-note:var(--lavender-300);
  --status-alert:var(--copper-300);

  --mark-ring:var(--paper-100);
  --mark-ring-alt:var(--teal-400);
  --mark-branch:var(--paper-100);
  --mark-node:var(--paper-100);
  --mark-root:var(--copper-300);

  --accent-copper:var(--copper-300);
  --accent-green:var(--teal-300);
  --accent-teal:var(--teal-400);
  --accent-gold:var(--gold-500);
  --accent-lavender:var(--lavender-300);
  --accent-neutral:var(--text-muted);

  --series-1:var(--teal-400);
  --series-2:var(--copper-400);
  --series-3:var(--gold-500);
  --series-4:var(--lavender-300);
  --series-5:var(--paper-400);

  --pattern-topo:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%23E8E0D2' stroke-opacity='.09'%3E%3Cpath d='M-10 96c40-4 62-30 108-30s72 26 152 20'/%3E%3Cpath d='M-10 78c44-6 66-28 112-28s70 24 148 18'/%3E%3Cpath d='M-10 60c48-8 70-26 116-26s68 22 144 16'/%3E%3Cpath d='M-10 42c52-10 74-24 120-24s66 20 140 14'/%3E%3Cpath d='M-10 24c56-12 78-22 124-22s64 18 136 12'/%3E%3C/g%3E%3C/svg%3E");
}


/* ── tokens/typography.css ───────────────────────────────── */
:root{
  /* Families — the serif carries the voice, the geometric sans carries the labels */
  --font-display:"EB Garamond","Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-body:"EB Garamond","Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-ui:"Jost","Futura","Avenir Next",-apple-system,Helvetica,Arial,sans-serif;
  --font-label:var(--font-ui);
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Scale — 1.25 major third off a 19px prose base (Garamond runs small) */
  --text-2xs:12px;
  --text-xs:14px;
  --text-sm:16px;
  --text-base:19px;
  --text-md:21px;
  --text-lg:25px;
  --text-xl:31px;
  --text-2xl:39px;
  --text-3xl:49px;
  --text-4xl:61px;

  /* Line heights */
  --leading-tight:1.08;
  --leading-snug:1.22;
  --leading-normal:1.45;
  --leading-prose:1.6;

  /* Weights — the serif sets no heavier than 600 */
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  /* Tracking — the serif sets normal, small-caps labels set wide */
  --tracking-tight:-0.005em;
  --tracking-normal:0;
  --tracking-wide:0.06em;
  --tracking-label:0.16em;

  /* Measure */
  --measure-prose:70ch;
  --measure-narrow:54ch;
}


/* ── tokens/spacing.css ───────────────────────────────── */
:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  --layout-gutter:var(--space-5);
  --layout-max:1120px;
  --layout-prose:720px;
  --layout-sidebar:264px;
}


/* ── tokens/shape.css ───────────────────────────────── */
:root{
  /* Radii — near-square. The mark carries the geometry, not the boxes. */
  --radius-none:0;
  --radius-sm:2px;
  --radius-md:3px;
  --radius-lg:4px;
  --radius-pill:999px;

  --border-width:1px;
  --border-width-thick:2px;
  --rule-accent-width:2px;

  /* Elevation — hairlines do the structural work, shadow is a whisper on warm paper */
  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(41,44,43,.05);
  --shadow-md:0 2px 8px rgba(41,44,43,.07),0 1px 2px rgba(41,44,43,.04);
  --shadow-lg:0 10px 28px rgba(41,44,43,.10),0 2px 6px rgba(41,44,43,.05);
  --shadow-focus:0 0 0 3px rgba(169,88,63,.35);
}


/* ── tokens/motion.css ───────────────────────────────── */
:root{
  --duration-instant:80ms;
  --duration-fast:140ms;
  --duration-base:220ms;
  --duration-slow:400ms;

  /* No bounce, no overshoot — motion here is a measurement settling, not a toy */
  --ease-standard:cubic-bezier(.2,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);

  --transition-color:color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);
  --transition-shadow:box-shadow var(--duration-base) var(--ease-standard);
}
@media (prefers-reduced-motion:reduce){:root{
  --duration-instant:0ms;
  --duration-fast:0ms;
  --duration-base:0ms;
  --duration-slow:0ms;
}}