/* ===================================================================
   8020 MARKET — DESIGN TOKENS
   Brand colours pulled from real logo, store signage (yellow walls,
   forest-green shelving) and the AIDAS family-of-businesses graphic.
   Inspiration screenshots informed LAYOUT/MOTION only — never colour.
   =================================================================== */
:root{
  /* ---- Brand: Fresh Produce (primary) ---- */
  --forest-950:#0c2118;
  --forest-900:#123324;
  --forest-800:#16402d;
  --forest-700:#1b4d37;
  --forest-600:#236348;
  --forest-500:#2d7a59;
  --forest-400:#4a9973;
  --forest-100:#dcece3;
  --forest-50:#f0f7f3;

  /* ---- Brand: warm gold/amber (from store walls + crown in logo) ---- */
  --gold-700:#a3690f;
  --gold-600:#c17f14;
  --gold-500:#e0972a;
  --gold-400:#eeac47;
  --gold-300:#f4c56d;
  --gold-100:#fbe8c8;

  /* ---- Brand: cream (logo background / flyer band) ---- */
  --cream-200:#efe2c4;
  --cream-100:#f7efdc;
  --cream-50:#fbf6ea;

  /* ---- Division accent: Meat Supplies ---- */
  --meat-800:#5c1a16;
  --meat-700:#7a231d;
  --meat-600:#9c2e24;
  --meat-500:#b8382c;
  --meat-100:#f6ddd8;

  /* ---- Division accent: 8020 Farms (used sparingly, earthy) ---- */
  --earth-700:#5b4a2f;
  --earth-500:#8a6f45;
  --earth-300:#c2ab7c;

  /* ---- Neutrals ---- */
  --ink-950:#0b0f0d;
  --ink-900:#141912;
  --ink-700:#33392f;
  --ink-500:#5c6357;
  --ink-300:#96998f;
  --ink-100:#e4e7e0;
  --white:#ffffff;

  /* ---- Semantic ---- */
  --color-bg:#fbf6ea;
  --color-surface:#ffffff;
  --color-text:#141912;
  --color-text-muted:#5c6357;
  --color-primary:#1b4d37;
  --color-primary-strong:#123324;
  --color-accent:#e0972a;
  --color-meat:#9c2e24;
  --color-farm:#8a6f45;
  --color-danger:#b3261e;
  --color-success:#236348;
  --color-border:rgba(20,25,18,.1);
  --color-overlay-bg:#0c2118;

  /* ---- Typography ----
     Display: Fraunces (warm, characterful serif) — headlines, big numerals
     Body: Plus Jakarta Sans — paragraphs, UI text, prices
     Accent: Space Grotesk — badges, labels, product codes, nav */
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Plus Jakarta Sans', -apple-system, Segoe UI, sans-serif;
  --font-accent:'Space Grotesk', -apple-system, Segoe UI, sans-serif;

  --fs-h1:clamp(2.5rem, 5vw + 1rem, 5rem);
  --fs-h2:clamp(2rem, 3vw + 1rem, 3.25rem);
  --fs-h3:clamp(1.5rem, 1.6vw + 1rem, 2.25rem);
  --fs-h4:clamp(1.15rem, 1vw + .8rem, 1.5rem);
  --fs-body-lg:1.15rem;
  --fs-body:1rem;
  --fs-body-sm:.9rem;
  --fs-label:.8rem;

  /* ---- Spacing scale (8pt rhythm) ---- */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4rem;
  --space-9:6rem;
  --space-10:8rem;

  /* ---- Radii ---- */
  --radius-sm:.5rem;
  --radius-md:1rem;
  --radius-lg:1.5rem;
  --radius-xl:2rem;
  --radius-pill:999px;

  /* ---- Shadows ---- */
  --shadow-sm:0 1px 2px rgba(12,33,24,.08);
  --shadow-md:0 8px 24px rgba(12,33,24,.12);
  --shadow-lg:0 20px 48px rgba(12,33,24,.18);
  --shadow-nav:0 4px 20px rgba(12,33,24,.22);

  /* ---- Motion ---- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:150ms;
  --dur-base:250ms;
  --dur-slow:400ms;

  /* ---- Layout ---- */
  --container-max:1240px;
  --z-nav:100;
  --z-overlay:200;
  --z-floater:90;
  --z-toast:300;
}

/* This is a branded commerce site, not a utility app — the client's
   light/fresh palette is intentional and should look the same for every
   visitor, not flip to a dark theme based on their device setting. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}