/* ============================================================
   Farm & Fare — brand tokens for farmandfare.ca
   Adapted from the Farm & Fare Design System (colors_and_type.css).
   Fonts self-hosted from /fonts/. NOTE: Organetto files are the
   Fontspring DEMO set — swap in licensed production files before
   commercial release.
   ============================================================ */

@font-face {
  font-family: 'Organetto';
  src: url('/fonts/Fontspring-DEMO-organetto-regular.otf') format('opentype');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Organetto';
  src: url('/fonts/Fontspring-DEMO-organetto-bold.otf') format('opentype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Organetto';
  src: url('/fonts/Fontspring-DEMO-organetto-ultrabold.otf') format('opentype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
/* The Fontspring DEMO Organetto files replace the digit "4" and the
   hyphen "-" with a watermark ornament. Until licensed files are
   installed, serve digits and hyphens from Poppins. The weight ranges
   mirror the Organetto faces exactly so these later declarations win
   for the listed codepoints. */
@font-face {
  font-family: 'Organetto';
  src: url('/fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0024, U+0026, U+002D, U+0030-0039;
}
@font-face {
  font-family: 'Organetto';
  src: url('/fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0024, U+0026, U+002D, U+0030-0039;
}
@font-face {
  font-family: 'Organetto';
  src: url('/fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0024, U+0026, U+002D, U+0030-0039;
}

@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors — primary */
  --ff-mughal-green: #2D572A;
  --ff-pear:         #CBD43A;
  --ff-royal-orange: #F4913A;

  /* Colors — secondary */
  --ff-papaya-whip:  #FAF1D7;   /* default canvas */
  --ff-cashew-butter:#C2976D;
  --ff-pomegranate:  #B0053C;

  /* Tints (hover/press only) */
  --ff-mughal-green-dark:  #1E3B1C;
  --ff-mughal-green-soft:  #4A7A47;
  --ff-pear-dark:          #A6AE2E;
  --ff-royal-orange-dark:  #D97A21;
  --ff-pomegranate-dark:   #8C0430;

  --ff-cream-soft:   #F5E9C4;
  --ff-cream-rule:   #E8DBB0;

  --ff-ink:    #1B1B1B;
  --ff-paper:  #FFFFFF;

  /* Semantic */
  --ff-bg:        var(--ff-papaya-whip);
  --ff-bg-alt:    var(--ff-paper);
  --ff-fg:        var(--ff-mughal-green);
  --ff-fg-soft:   #4A4A3D;
  --ff-fg-muted:  #7A7567;
  --ff-accent:    var(--ff-royal-orange);
  --ff-rule:      var(--ff-cream-rule);

  /* Type */
  --ff-font-display: 'Organetto', 'Inter', system-ui, sans-serif;
  --ff-font-body:    'Poppins', system-ui, -apple-system, sans-serif;

  --ff-text-xs:   12px;
  --ff-text-sm:   14px;
  --ff-text-base: 16px;
  --ff-text-md:   18px;
  --ff-text-lg:   22px;
  --ff-text-xl:   28px;
  --ff-text-2xl:  36px;
  --ff-text-3xl:  48px;
  --ff-text-4xl:  64px;
  --ff-text-5xl:  88px;

  --ff-lh-display: 1.0;
  --ff-lh-snug:    1.2;
  --ff-lh-body:    1.55;

  --ff-track-tight:   -0.02em;
  --ff-track-caps:    0.08em;
  --ff-track-caps-lg: 0.16em;

  /* Spacing — 4pt */
  --ff-s-1:  4px;  --ff-s-2:  8px;  --ff-s-3: 12px; --ff-s-4: 16px;
  --ff-s-5: 24px;  --ff-s-6: 32px;  --ff-s-7: 48px; --ff-s-8: 64px;
  --ff-s-9: 96px;  --ff-s-10:128px;

  /* Radii */
  --ff-r-0: 0; --ff-r-sm: 4px; --ff-r-md: 8px; --ff-r-lg: 16px; --ff-r-pill: 999px;

  /* Shadows (sparing) */
  --ff-shadow-card: 0 4px 24px rgba(45, 87, 42, 0.10);
  --ff-shadow-pop:  0 12px 40px rgba(45, 87, 42, 0.18);

  /* Motion */
  --ff-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ff-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ff-dur-fast:    160ms;
  --ff-dur-base:    260ms;
  --ff-dur-slow:    480ms;

  /* Layout */
  --ff-container: 1200px;
  --ff-gutter:    24px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ff-bg);
  color: var(--ff-fg);
  font-family: var(--ff-font-body);
  font-size: var(--ff-text-base);
  line-height: var(--ff-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--ff-font-display); color: var(--ff-fg); margin: 0; }
p { margin: 0; }

/* Signature small label — ALL CAPS Royal Orange */
.ff-section-label {
  font-family: var(--ff-font-display);
  font-weight: 700;
  font-size: var(--ff-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--ff-track-caps);
  color: var(--ff-royal-orange);
}

/* Spaced caps eyebrow */
.ff-caps-spaced {
  font-family: var(--ff-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ff-track-caps-lg);
  font-size: var(--ff-text-sm);
}

/* Brand-name highlight inside body copy */
.ff-brand-name { color: var(--ff-royal-orange); font-weight: 600; }

/* Buttons — pill, uppercase */
.ff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ff-s-2);
  padding: 15px 30px;
  font-family: var(--ff-font-display);
  font-weight: 600;
  font-size: var(--ff-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--ff-track-caps);
  border-radius: var(--ff-r-pill);
  border: 0;
  cursor: pointer;
  transition: filter var(--ff-dur-fast) var(--ff-ease-out),
              transform var(--ff-dur-fast) var(--ff-ease-out),
              background var(--ff-dur-fast) var(--ff-ease-out),
              color var(--ff-dur-fast) var(--ff-ease-out);
  background: var(--ff-mughal-green);
  color: var(--ff-paper);
  text-decoration: none;
  white-space: nowrap;
}
.ff-btn:hover { filter: brightness(0.92); }
.ff-btn:active { transform: scale(0.98); filter: brightness(0.85); }
.ff-btn--orange { background: var(--ff-royal-orange); color: var(--ff-paper); }
.ff-btn--pear { background: var(--ff-pear); color: var(--ff-mughal-green); }
.ff-btn--ghost {
  background: transparent;
  color: var(--ff-mughal-green);
  border: 1.5px solid var(--ff-mughal-green);
}
.ff-btn--ghost:hover { background: var(--ff-mughal-green); color: var(--ff-paper); filter: none; }
.ff-btn--ghost-light {
  background: transparent;
  color: var(--ff-papaya-whip);
  border: 1.5px solid rgba(250, 241, 215, 0.6);
}
.ff-btn--ghost-light:hover { background: rgba(250, 241, 215, 0.14); filter: none; }

/* Sticker pill */
.ff-sticker {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: var(--ff-pear);
  color: var(--ff-mughal-green);
  border-radius: var(--ff-r-pill);
  font-family: var(--ff-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ff-track-caps);
  font-size: var(--ff-text-xs);
}

/* Hairline rule */
.ff-rule { border: 0; border-top: 1px solid var(--ff-rule); margin: 0; }

::selection { background: var(--ff-pear); color: var(--ff-mughal-green); }