/* ==========================================================================
   Guimaras Wonder's Farm — design tokens
   Palette is fixed by the client. Type and geometry follow the approved brief.
   ========================================================================== */

:root {
  /* ---- Colour. Do not add to this list without a reason. ---------------- */
  --gwf-green:  #14622F;  /* primary: nav, buttons, headings on light, borders */
  --gwf-ink:    #1E2A1C;  /* near-black green: body text, dark band grounds    */
  --gwf-gold:   #E5B325;  /* accent — see the contrast note below              */
  --gwf-bone:   #F7F8F1;  /* page ground, and text on dark                     */
  --gwf-sage:   #C9D6A8;  /* secondary band ground                             */
  --gwf-moss:   #4A6146;  /* muted text on light, hairlines, paperwork rail    */
  --gwf-lime:   #8FCB3F;  /* eyebrows — ON DARK GROUNDS ONLY                   */

  --gwf-error:     #B3261E;
  --gwf-error-bg:  #FDF5F4;
  --gwf-warn:      #8A6A00;
  --gwf-warn-bg:   #FBF3DA;

  /* THE GOLD RULE: gold on bone measures 1.82:1 and fails WCAG badly.
     Gold is for solid fills, marks and rules ONLY — never text on a light
     ground. A gold button with --gwf-ink text is correct; a gold price is not.
     Budget it to roughly one appearance per screen. */

  --gwf-hairline: rgba(20, 98, 47, 0.18);
  --gwf-hairline-dark: rgba(247, 248, 241, 0.20);

  /* ---- Type -------------------------------------------------------------
     Archivo carries a real width axis, and the width axis IS the system:
     expanded for display, normal for labels, condensed for manifest and data.
     That is how a printed export carton behaves. Lato does all reading text.
     If the Archivo pairing is ever dropped, only these two lines change. */
  --gwf-display: 'Archivo', 'Lato', system-ui, sans-serif;
  --gwf-body:    'Lato', system-ui, -apple-system, sans-serif;

  --gwf-w-expanded: 118;
  --gwf-w-normal:   100;
  --gwf-w-condensed: 78;

  /* Fluid scale */
  --gwf-h1:      clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
  --gwf-h2:      clamp(1.75rem, 1.5rem + 1.5vw, 2.75rem);
  --gwf-h3:      1.1875rem;
  --gwf-lead:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --gwf-body-sz: 1rem;
  --gwf-small:   0.875rem;
  --gwf-micro:   0.6875rem;

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

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

  /* ---- Geometry ---------------------------------------------------------
     The notch is the carton's cut corner. It belongs on things that ship or
     hold goods — hero and feature images, product plates, the About portrait.
     Never on buttons, inputs or small thumbnails, where it reads as damage. */
  --gwf-notch-lg: 48px;
  --gwf-notch-md: 28px;
  --gwf-notch-sm: 24px;

  --gwf-radius: 6px;
  --gwf-radius-card: 8px;
  --gwf-radius-pill: 999px;

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

/* ==========================================================================
   Utilities built from the tokens
   ========================================================================== */

.gwf-notch    { clip-path: polygon(0 0, calc(100% - var(--gwf-notch-md)) 0, 100% var(--gwf-notch-md), 100% 100%, 0 100%); }
.gwf-notch-lg { clip-path: polygon(0 0, calc(100% - var(--gwf-notch-lg)) 0, 100% var(--gwf-notch-lg), 100% 100%, 0 100%); }
.gwf-notch-sm { clip-path: polygon(0 0, calc(100% - var(--gwf-notch-sm)) 0, 100% var(--gwf-notch-sm), 100% 100%, 0 100%); }

/* THE SIGNATURE — the manifest rule.
   A hairline carrying condensed uppercase metadata, lifted from the text
   printed on the farm's own export carton. It must carry real information
   every time it appears. Never filler. */
.gwf-manifest {
  font-family: var(--gwf-display);
  font-variation-settings: 'wdth' var(--gwf-w-condensed), 'wght' 600;
  font-size: var(--gwf-micro);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gwf-moss);
  border-top: 1px solid var(--gwf-hairline);
  padding-top: 10px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75em;
  align-items: baseline;
}
.gwf-manifest > * + *::before {
  content: '·';
  margin-right: 0.75em;
  color: var(--gwf-gold);
}
.gwf-band--ink .gwf-manifest,
.gwf-band--green .gwf-manifest {
  color: rgba(247, 248, 241, 0.72);
  border-top-color: var(--gwf-hairline-dark);
}

/* The hero's manifest rule prints itself once on load, left to right. */
.gwf-manifest--print { -webkit-mask-image: linear-gradient(to right, #000 0 0); mask-image: linear-gradient(to right, #000 0 0); }
@media (prefers-reduced-motion: no-preference) {
  .gwf-manifest--print {
    animation: gwf-print 600ms var(--gwf-ease) both;
  }
  @keyframes gwf-print {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
}

/* Eyebrow above every section heading. */
.gwf-eyebrow {
  font-family: var(--gwf-display);
  font-variation-settings: 'wdth' var(--gwf-w-normal), 'wght' 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gwf-green);
  margin: 0 0 16px;
}
.gwf-band--ink .gwf-eyebrow,
.gwf-band--green .gwf-eyebrow { color: var(--gwf-lime); }

/* Tabular figures for anything that is a number rather than a word. */
.gwf-num {
  font-family: var(--gwf-display);
  font-variation-settings: 'wdth' var(--gwf-w-normal), 'wght' 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}