/* ==========================================================================
   Guimaras Wonder's Farm — design tokens
   Rewritten 2026-08-23 to follow Guimaras Wonders Farm.fig. Every value here
   is exact, pulled from the Figma file's own REST API data — see
   docs/superpowers/specs/2026-08-23-gwf-figma-redesign-design.md. Do not
   adjust a value without updating that spec too.
   ========================================================================== */

@font-face {
  font-family: 'Autour One';
  src: url('../fonts/autour-one-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inria Sans';
  src: url('../fonts/inria-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inria Sans';
  src: url('../fonts/inria-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bernadette';
  src: url('../fonts/bernadette.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colour --------------------------------------------------------- */
  --gwf-green: #173B2A; /* primary: nav, buttons, headings, borders */
  --gwf-ink:   #20251F; /* body text */
  --gwf-bone:  #F7F3E8; /* page ground */
  --gwf-sand:  #EFEBE0; /* secondary section ground */
  --gwf-white: #FFFFFF;
  --gwf-gold:  #F2B233; /* accent: CTA highlight, icon-circle fills, eyebrows on dark */
  --gwf-sage:  #5C7F45; /* secondary green: tags, eyebrows on light */

  --gwf-error:    #D9381E;
  --gwf-error-bg: #FDF0ED;
  --gwf-warn:     #8A6A00;
  --gwf-warn-bg:  #FBF3DA;

  --gwf-hairline:      #DCD8CE;
  --gwf-hairline-dark: rgba(247, 243, 232, 0.20);

  /* ---- Type -------------------------------------------------------------
     Autour One is a single static weight (400) — headings vary by SIZE, not
     weight. Inria Sans supplies both weights everything else needs. Letter-
     spacing stays at browser default everywhere, including uppercase labels
     — the Figma file uses zero tracking even on its eyebrow/badge text. */
  --gwf-display: 'Autour One', Georgia, serif;
  --gwf-body:    'Inria Sans', system-ui, -apple-system, sans-serif;
  --gwf-script:  'Bernadette', cursive;

  --gwf-h1:      clamp(2.5rem, 1.9rem + 3vw, 3.5rem);   /* 40-56px */
  /* 40px at desktop is Figma's section-heading size, not a guess: it is the
     size on 8 of the homepage's headings, and on the products, our-story,
     contact, cart and mango-jam-detail frames too. This token used to top out
     at 32px, which left every section heading on the site a fifth too small. */
  --gwf-h2:      clamp(1.75rem, 1.25rem + 2.5vw, 2.5rem); /* 28-40px */
  /* Figma reserves 48px for three "statement" headings on the homepage —
     brand-introduction (4:33), our-story (4:207) and final-cta (4:227) — and
     uses it again on the products, our-story and contact frames. */
  --gwf-h2-lg:   clamp(2rem, 1.5rem + 2.5vw, 3rem);      /* 32-48px */
  /* 44px is the size Figma gives the two long-form split headings on the
     Our Story frame — "From Ten Trees to a Whole Farm" (11:456) and
     "A Growing Family" (11:487). It sits between the 40px section heading and
     the 48px statement heading, and is used on those two headings only. */
  --gwf-h2-md:   clamp(1.875rem, 1.35rem + 2.6vw, 2.75rem); /* 30-44px */
  --gwf-h3:      1.375rem;                              /* 22px */
  /* Figma's two other heading sizes, both Contact-frame card titles: 24px on
     the map/visit card (11:787), 28px on "Send Us a Message" (11:721) and
     "Contact Information" (11:749). */
  --gwf-h3-md:   clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);   /* 20-24px */
  --gwf-h3-lg:   clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem); /* 22-28px */
  --gwf-h4:      1.125rem;                               /* 18px */
  --gwf-lead:    1.125rem;                               /* 18px */
  --gwf-body-sz: 0.875rem;                               /* 14px */
  --gwf-small:   0.8125rem;                              /* 13px */
  --gwf-micro:   0.75rem;                                /* 12px */

  --gwf-measure: 68ch;
  --gwf-measure-lead: 58ch;

  /* ---- Layout ------------------------------------------------------------*/
  --gwf-column: 1280px;
  --gwf-gutter: 48px;
  --gwf-gutter-sm: 20px;
  --gwf-band-y: 96px;
  --gwf-band-y-sm: 56px;

  /* ---- Geometry -----------------------------------------------------------
     Soft rounded corners. No clip-path anywhere in this system. */
  --gwf-radius:      12px;  /* inputs, small controls */
  --gwf-radius-card: 20px;  /* cards, photo frames */
  --gwf-radius-lg:   24px;  /* large panels, hero card */
  --gwf-radius-pill: 999px; /* buttons, badges */

  --gwf-shadow:    0 4px 12px rgba(23, 59, 42, 0.13);
  --gwf-shadow-lg: 0 16px 40px rgba(23, 59, 42, 0.19);

  --gwf-ease: cubic-bezier(0.2, 0, 0, 1);
  --gwf-dur: 240ms;
}