/* Brand design tokens — shared across all marketing pages.
   Canonical Seed & Sew palette. Page-specific neutral overrides (if any)
   live in that page's own stylesheet. */
:root {
  /* Greens */
  --green: #526662;
  --green-deep: #3d4f4c;
  --green-light: #ebf1ef;
  --green-mid: #a8b2b0;

  /* Accents */
  --gold: #c8ad57;      /* real gold — used sparingly for emphasis (hero <em>, reactive-cycle arrows) */
  --gold-mid: #d4bd77;  /* muted gold between --gold and --gold-light (speaking testimonials eyebrow) */
  --gold-light: #f4ecd3; /* warm gold tint for section bands & callouts (speaking page) */
  --terracotta: #9c6148;
  --terra-light: #f0e7e4;
  --steel: #81a5ad;
  --steel-light: #ecf2f3;

  /* Neutrals */
  --cream: #faf9f8;
  --cream-dark: #edece8;
  --ink: #2e3d3a;
  --ink-light: #526662;
  --ink-lighter: #a8b2b0;
  --border: rgba(82, 102, 98, 0.15);
  --border-strong: rgba(82, 102, 98, 0.28);

  /* Radii & layout */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --max: 1120px;

  /* Section vertical padding — pared down on mobile via the @media below.
     Referenced by every page's .ss-section / -sm / -xs (and .ss-tension). */
  --section-pad: 80px;
  --section-pad-sm: 60px;
  --section-pad-xs: 40px;

  /* Type */
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Open Sans', sans-serif;

  /* Type scale — sans reading copy. Headings/display type use per-page
     clamp() scales; labels & chrome (nav, buttons, footer) stay bespoke. */
  --fs-meta: 12px;  /* attributions, fine print */
  --fs-sm: 14px;    /* dense card copy: tension/tier/outcome/pillar lists, chat bubbles */
  --fs-base: 16px;  /* primary reading copy: bios, topics, checklists, feature & quote text */
  --fs-lead: 18px;  /* leads, hero subs, CTA bar copy, testimonial intros */
}

/* Tighter section rhythm on phones. */
@media (max-width: 640px) {
  :root {
    --section-pad: 52px;
    --section-pad-sm: 44px;
    --section-pad-xs: 32px;
  }
}