/* ==========================================================================
   Farmstand design tokens
   Every colour, size, radius, shadow and timing in the product comes from
   here. Nothing downstream hard-codes a hex value.
   ========================================================================== */

:root {
  /* --- Brand green -------------------------------------------------------
     Scale derived from #00512C (green-700 is the brand colour itself).
     700/800/900 carry white text; 50–200 are surfaces, not text colours.   */
  --green-50:  #f1f7f3;
  --green-100: #dcede3;
  --green-200: #b6d8c5;
  --green-300: #86bc9f;
  --green-400: #519c76;
  --green-500: #2a7f55;
  --green-600: #10673e;
  --green-700: #00512c;
  --green-800: #013f23;
  --green-900: #012e1a;

  /* --- Warm neutrals ---------------------------------------------------- */
  --cream-50:  #fdfbf7;
  --cream-100: #faf7f0;   /* page background */
  --cream-200: #f4eee2;
  --sand-100:  #efe7d5;
  --sand-200:  #e3d8c2;
  --sand-300:  #d3c5a9;

  /* --- Ink (near-black with a green cast, never pure #000) --------------
     Measured on the cream background (see /styleguide):
       ink-900 15.71 AAA · ink-700 9.91 AAA · ink-600 7.01 AAA
       ink-500  5.26 AA   · ink-400 3.38 FAILS AA for body text
     ink-400 (--text-subtle) is therefore decoration only — separators,
     disabled states, icon washes. Never small text.                        */
  --ink-900: #13201a;
  --ink-700: #33423a;
  --ink-600: #4a584f;
  --ink-500: #5c6b62;
  --ink-400: #7c8a81;

  /* --- Harvest amber: "Available today", premium highlights -------------- */
  --amber-50:  #fdf3e3;
  --amber-100: #f9e3c2;
  --amber-300: #f0b465;
  --amber-500: #e3922e;
  --amber-600: #c87715;
  --amber-700: #9c5b0b;

  /* --- Clay: sold out, closed, destructive ------------------------------ */
  --clay-50:  #fbede9;
  --clay-500: #b4472f;
  --clay-600: #9a3a24;

  /* --- Semantic aliases ------------------------------------------------- */
  --bg:            var(--cream-100);
  --bg-raised:     #ffffff;
  --bg-sunken:     var(--cream-200);
  --surface-warm:  var(--sand-100);
  --brand:         var(--green-700);
  --brand-hover:   var(--green-800);
  --brand-soft:    var(--green-50);
  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-on-brand: #ffffff;
  --line:          #e8e0ce;
  --line-strong:   var(--sand-300);
  --focus:         var(--green-500);

  /* --- Typography -------------------------------------------------------- */
  --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

  /* Fluid scale, 375px → 1440px viewport */
  --text-xs:   clamp(0.75rem,  0.74rem + 0.05vw, 0.8125rem);
  --text-sm:   clamp(0.8125rem, 0.80rem + 0.10vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.92rem + 0.15vw, 1rem);
  --text-md:   clamp(1.0625rem, 1.04rem + 0.15vw, 1.125rem);
  --text-lg:   clamp(1.1875rem, 1.13rem + 0.30vw, 1.375rem);
  --text-xl:   clamp(1.4375rem, 1.33rem + 0.50vw, 1.75rem);
  --text-2xl:  clamp(1.75rem,  1.55rem + 0.90vw, 2.375rem);
  --text-3xl:  clamp(2.125rem, 1.78rem + 1.50vw, 3rem);

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.55;
  --tracking-tight: -0.02em;
  --tracking-wide:  0.02em;

  /* --- Spacing (4px base) ------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* --- Shape ------------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* --- Depth: soft and layered, never a single hard drop ----------------- */
  --shadow-xs:    0 1px 2px rgba(19, 32, 26, 0.05);
  --shadow-sm:    0 1px 2px rgba(19, 32, 26, 0.06), 0 2px 6px -2px rgba(19, 32, 26, 0.06);
  --shadow-md:    0 2px 4px rgba(19, 32, 26, 0.05), 0 8px 20px -6px rgba(19, 32, 26, 0.12);
  --shadow-lg:    0 4px 8px rgba(19, 32, 26, 0.06), 0 18px 36px -10px rgba(19, 32, 26, 0.16);
  --shadow-sheet: 0 -6px 28px rgba(19, 32, 26, 0.14);
  --shadow-brand: 0 6px 20px -6px rgba(0, 81, 44, 0.45);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --t-fast: 150ms;
  --t-med:  200ms;
  --t-slow: 250ms;

  /* --- Layout ------------------------------------------------------------ */
  --page-max:    1440px;
  --content-max: 68rem;
  --prose-max:   38rem;
  --gutter:      1rem;
  --header-h:    4rem;

  /* --- Layers ------------------------------------------------------------ */
  --z-map:      1;
  --z-sheet:    40;
  --z-header:   50;
  --z-modal:    70;
  --z-toast:    90;

  /* --- Safe areas (iOS notch / home indicator) --------------------------- */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}

@media (min-width: 48rem) {
  :root { --gutter: 1.5rem; --header-h: 4.5rem; }
}

@media (min-width: 64rem) {
  :root { --gutter: 2rem; }
}