/* ============================================================
   RESPONSIVE PARENTING HUB — Design Tokens (web)
   Ported 1:1 from book-project/styles/tokens.css (colors, fonts)
   with web-specific type scale, spacing, and layout tokens added.
   Keep color/font values in sync with the book project by hand —
   they are the same brand system on two different pipelines.
   ============================================================ */

:root {
  /* ---- Color: paper & ink ---- */
  --paper: #faf6ee;          /* page background, "warm cream" */
  --paper-white: #ffffff;    /* card backgrounds */
  --ink: #2b2b26;            /* primary text */
  --ink-soft: #5b5b52;       /* secondary text, captions */
  --ink-faint: #8c887a;      /* tertiary text, meta */

  /* ---- Color: brand ---- */
  --sage: #6b8058;
  --sage-dark: #33422b;
  --sage-light: #e9edde;     /* tints for callout backgrounds */
  --sage-lightest: #f3f5ec;
  --gold: #b48a3f;
  --gold-soft: #d8bd82;
  --line: #ddd6c4;           /* hairlines, dividers, borders */

  /* ---- Color: compassion note (replaces alarming red) ---- */
  --rose-tint: #f5ece6;
  --rose-line: #d9b9a8;

  /* ---- Color: in-article links (muted denim, distinct from sage/gold/ink) ---- */
  --link: #3a5e85;
  --link-hover: #2e4b6a;

  /* ---- Type families ----
     Display: Fraunces (expressive serif, headlines only).
     Body: Inter (clean sans — deliberately NOT a second serif; avoids the
     "two literary serifs" pairing that reads as a generic templated brand).
     Quote: Lora italic, reserved for pull-quotes/testimonials only, so it
     reads as a considered editorial accent rather than the default body face. */
  --font-display: 'Fraunces', Georgia, 'Iowan Old Style', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-quote: 'Lora', Georgia, serif;
  --font-ui: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* ---- Type scale (web, fluid rem) ---- */
  --size-body: 1.0625rem;      /* 17px */
  --size-body-small: 0.9375rem;
  --size-caption: 0.85rem;
  --size-h1: clamp(2.1rem, 4.5vw, 3.4rem);
  --size-h2: clamp(1.5rem, 3vw, 2.2rem);
  --size-h3: clamp(1.2rem, 2vw, 1.5rem);
  --size-quote: clamp(1.1rem, 2vw, 1.4rem);
  --size-eyebrow: 0.8rem;

  /* ---- Leading & spacing ----
     space-4 and up are fluid (clamp) so section padding/gaps scale down
     smoothly on small screens instead of carrying desktop-sized whitespace
     onto a 375px phone. space-1..3 stay fixed — too small to matter. */
  --lh-body: 1.65;
  --lh-tight: 1.3;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: clamp(16px, 4vw, 22px);
  --space-5: clamp(18px, 4vw, 28px);
  --space-6: clamp(22px, 5vw, 38px);
  --space-7: clamp(28px, 6vw, 56px);

  /* ---- Layout ---- */
  --container-w: 1120px;
  --container-narrow: 760px;
  --container-pad: clamp(16px, 5vw, 24px);

  /* ---- Radii & shadow ---- */
  --radius: 8px;
  --radius-lg: 16px;
  --shadow-soft: 0 6px 18px rgba(43, 43, 38, 0.08);
  --shadow-card: 0 10px 30px rgba(43, 43, 38, 0.10);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 220ms var(--ease);
  --reveal-duration: 700ms;
}