/* Design tokens: the palette, the type scale and the spacing rhythm that every
   other stylesheet reads from.

   The palette is sampled directly from the Syssia Aguiar logo — the warm cream
   paper it sits on, the cornflower blue of the "S" and the wordmark, and the
   eucalyptus green of the "A" and the leaf branch. Blue carries action
   (buttons, links, active state); green carries warmth (script eyebrows,
   marquees, meta labels). */

:root {
  /* --- surfaces --- */
  --white: #ffffff;
  --paper: #fcf6f3; /* the logo's own paper — page base, header, footer */
  --mist: #eaf2f2; /* blue-green band: alternating sections, cards */
  --blue-mist: #e6f0f8;

  /* --- brand: blue (action) --- */
  --blue: #4b8bbc; /* decorative only — too light for text on paper */
  --blue-deep: #37709b; /* text + button fill: 4.9:1 on paper, 5.3:1 on white */
  --blue-darker: #2b5b7f;
  --blue-mid: #6ba2d2;
  --blue-soft: #a9cdea;

  /* --- brand: eucalyptus green (warmth) --- */
  --sage: #5e9c90; /* decorative only */
  --sage-deep: #47786e; /* text-safe green: 4.7:1 on paper */
  --sage-mid: #84b4ae;
  --sage-soft: #b8d8d0;

  /* --- ink --- */
  --ink: #35505c; /* all body copy and headings */
  --ink-strong: #1f3a46;
  --ink-soft: rgba(53, 80, 92, 0.55);
  --hairline: rgba(53, 80, 92, 0.2);

  /* --- type families --- */
  --font-display: "playfair-display-v2", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "helvetica-w01-light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-roman: "helvetica-w01-roman", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-script: "script-brand", "Brush Script MT", cursive;

  /* --- type scale (fluid, tuned so 1440px matches the source exactly) --- */
  --fs-display: clamp(40px, 4.38vw, 63px); /* hero h1 */
  --fs-h2: clamp(34px, 3.49vw, 50.25px); /* section titles */
  --fs-h3: clamp(30px, 3.02vw, 43.5px); /* topic + step titles */
  --fs-h4: clamp(28px, 2.78vw, 40px); /* FAQ questions, newsletter */
  --fs-h5: clamp(26px, 2.5vw, 36px); /* mission quote, footer form */
  --fs-h6: clamp(24px, 2.22vw, 32px); /* article card titles */
  --fs-quote: clamp(21px, 2vw, 28.77px); /* pull quote */
  --fs-lead: clamp(17px, 1.37vw, 19.78px);
  --fs-body: clamp(16px, 1.25vw, 18px);
  --fs-small: clamp(14px, 1.12vw, 16.18px); /* button labels, eyebrows */
  --fs-meta: clamp(12px, 1vw, 14.38px);
  --fs-nav: clamp(15px, 1.25vw, 18px);

  /* script sizes — tuned for Petit Formal Script's larger x-height */
  --fs-script: clamp(22px, 2.29vw, 33px);
  --fs-script-lg: clamp(25px, 2.64vw, 38px);
  --fs-script-num: clamp(28px, 2.92vw, 42px);

  /* --- rhythm --- */
  --container: 1440px;
  --gutter: clamp(16px, 1.25vw, 18px);
  --section-y: clamp(56px, 6.2vw, 90px);
  --col-gap: clamp(28px, 4.95vw, 71.25px);

  /* --- motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.4s;
}