/* Prairie Fill — design tokens (owned by Claude). Build pages against these. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../assets/fonts/fraunces-latin-v38-600-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-v20-400-800.woff2") format("woff2");
}

:root {
  /* Brand — sampled directly from the logo (#2A5631 green, #EAE2AC bloom cream) */
  --pf-green: #2A5631;
  --pf-green-700: #1E3F24;
  --pf-green-200: #D4DECB;
  --pf-bloom: #EAE2AC;        /* the pale flower cream from the logo */
  --pf-bloom-200: #F3EDCB;
  --pf-sage: #BFCEAB;         /* soft sage from the owner's mockups (curved sections) */
  --pf-sage-200: #DCE6CC;
  --pf-wheat: #E0BE57;        /* warm gold for CTAs (ADD TO CART / SHOP NOW) — from the mockups */
  --pf-wheat-200: #F1E3B0;
  --pf-terracotta: #C26B4A;      /* decorative only — fails 4.5:1 as small text */
  --pf-terracotta-700: #9E4728;  /* text/badge-safe terracotta: 6.2:1 w/ white, 5.7:1 on cream */

  /* Surfaces & ink */
  --pf-cream: #FAF6EE;
  --pf-paper: #FFFFFF;
  --pf-ink: #23241F;
  --pf-ink-soft: #5A5C50;
  --pf-line: #E5DDCB;

  /* Semantic */
  --pf-bg: var(--pf-cream);
  --pf-text: var(--pf-ink);
  --pf-primary: var(--pf-green);
  --pf-primary-ink: #ffffff;
  --pf-accent: var(--pf-wheat);
  --pf-error: #A02C21;           /* form errors — 6.6:1 on white */
  --pf-error-bg: #FBEDEA;
  --pf-success: var(--pf-green-700);
  --pf-success-bg: #EAF3E9;

  /* Type */
  --pf-font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --pf-font-body: "Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;

  /* Spacing scale (8px base) */
  --pf-1: 4px;  --pf-2: 8px;  --pf-3: 12px; --pf-4: 16px;
  --pf-5: 24px; --pf-6: 32px; --pf-7: 48px; --pf-8: 64px; --pf-9: 96px;

  /* Radii & shadow — sm/md match what the built pages actually use (4px CTAs, 8px cards) */
  --pf-radius-sm: 4px;
  --pf-radius-md: 8px;
  --pf-radius: 12px;
  --pf-radius-lg: 20px;
  --pf-radius-pill: 999px;
  --pf-shadow: 0 1px 2px rgba(35,36,31,.06), 0 8px 24px rgba(35,36,31,.06);
  --pf-shadow-lg: 0 12px 40px rgba(35,36,31,.12);

  /* Layout */
  --pf-container: 1080px;
  --pf-sticky-offset: 92px;   /* sticky buy-box top / anchor clearance under the sticky header */
}