/* Mom & Baby Playbook — colors + type tokens
   Source of truth: source/Mom & Baby Affiliate Playbook.html (:root) */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=DM+Mono:wght@400;500&display=swap');

:root{
  /* ---- Neutrals (warm) ---- */
  --bg:#f7f3ee;        /* page — warm oat */
  --paper:#fffdfa;     /* cards, pills, surfaces */
  --ink:#2a2420;       /* primary text, active pills, toast */
  --soft:#6f655d;      /* secondary text */
  --line:#e6ddd3;      /* every border + divider */

  /* ---- Accents: same L/C, hue varies ---- */
  --rose:oklch(0.68 0.09 30);     /* brand accent: eyebrows, <em>, numbers, bullets */
  --sage:oklch(0.68 0.09 150);    /* success / progress / done / intent */
  --sky:oklch(0.68 0.09 240);     /* tertiary, rarely used solid */
  --rose-bg:oklch(0.95 0.025 30);
  --sage-bg:oklch(0.95 0.025 150);
  --sky-bg:oklch(0.95 0.025 240);
  --rose-ink:oklch(0.45 0.09 30); /* text on rose-bg (tag pill) */
  --sage-ink:oklch(0.40 0.08 150);/* text on sage-bg (mock zones) */
  --sage-line:oklch(0.55 0.09 150);/* dashed zone border */

  /* ---- Semantic ---- */
  --fg1:var(--ink); --fg2:var(--soft); --accent:var(--rose);
  --success:var(--sage); --surface:var(--paper); --border:var(--line);

  /* ---- Families ---- */
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;

  /* ---- Radii ---- */
  --r-check:5px; --r-nav:8px; --r-zone:10px; --r-note:12px;
  --r-card:16px; --r-frame:18px; --r-pill:999px;

  /* ---- Spacing ---- */
  --gap-s:8px; --gap:16px; --gap-l:24px; --pad-card:24px;
  --section-pad:56px; --main-pad-x:64px; --sidebar-w:240px; --max-w:1320px;

  /* ---- Motion ---- */
  --t-fast:.15s; --t-toast:.2s; --t-bar:.3s;
}

/* ---- Semantic type ---- */
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
.h1,h1{font:400 76px/1 var(--serif);letter-spacing:-.01em;max-width:14ch}
.h1 em,h1 em{color:var(--rose)}
.h2,h2{font:400 48px/1.05 var(--serif)}
.h3,h3{font:600 17px/1.3 var(--sans)}
.display-md{font:400 34px/1.1 var(--serif)}     /* funnel titles, category name */
.display-sm{font:400 24px/1.2 var(--serif)}     /* phase titles */
.quote{font:italic 20px/1.3 var(--serif)}        /* example headlines */
.brand-mark{font:italic 26px/1.1 var(--serif)}
.eyebrow{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--rose)}
.lede{font-size:19px;color:var(--soft);max-width:60ch;text-wrap:pretty}
.sub{color:var(--soft);max-width:62ch;text-wrap:pretty}
.p,p{font-size:16px}
.small{font-size:14px;color:var(--soft)}
.label,code{font:12px var(--mono);color:var(--soft)}
.th{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--soft)}