/* ==========================================================================
   FarmFresh — design tokens
   Palette sampled directly from the FarmFresh brand work
   (dionz.com/work/farmfresh): logo green, forest panels, mint sections,
   amber call-to-action, peach secondary.
   ========================================================================== */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --brand:            #3CBA7B;   /* logo green / active cards            */
  --brand-600:        #2FA76C;
  --brand-700:        #22925C;
  --forest:           #006A53;   /* footer, nav panels, primary buttons  */
  --forest-800:       #005543;
  --forest-600:       #0C8164;   /* "Meet the farmer" panel              */
  --forest-500:       #167361;   /* app chrome on mobile                 */

  --amber:            #F78F20;   /* ADD TO CART / SIGN IN                */
  --amber-600:        #E07D14;
  --amber-200:        #FCE3C7;   /* peach secondary button               */
  --gold:             #F0A500;   /* rating stars                         */
  --berry:            #D94A3D;   /* SALE tag                             */

  /* ---- Surfaces ------------------------------------------------------- */
  --mint:             #DEECDB;   /* chips, plates, small fills           */
  --mint-100:         #EAF5E8;   /* light section background             */
  --mint-50:          #F6FBF5;   /* page background (airy)               */
  --sage:             #C2DAC2;   /* product card background              */
  --paper:            #FFFFFF;
  --paper-2:          #F7FAF7;

  --bg:               var(--mint-50);
  --surface:          var(--paper);
  --surface-2:        var(--paper-2);
  --surface-sunken:   var(--mint-100);
  --card:             var(--paper);

  /* ---- Text ----------------------------------------------------------- */
  --ink:              #16261F;
  --ink-2:            #44564E;
  --ink-3:            #6B7D75;
  --ink-on-dark:      #FFFFFF;
  --ink-on-dark-2:    #CFE6DC;
  --heading:          var(--forest);

  /* ---- Lines & shadow -------------------------------------------------- */
  --line:             #DCE6DF;
  --line-strong:      #BACCC2;
  --focus:            #0C8164;

  --shadow-xs:  0 1px 2px rgba(10, 44, 34, .06);
  --shadow-sm:  0 2px 8px rgba(10, 44, 34, .07);
  --shadow-md:  0 6px 20px rgba(10, 44, 34, .10);
  --shadow-lg:  0 18px 44px rgba(10, 44, 34, .16);

  /* ---- Type ------------------------------------------------------------ */
  --font-sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Quicksand", "Nunito Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;

  --t-xs:   .75rem;   --t-sm:   .8125rem;  --t-base: .9375rem;
  --t-md:   1.0625rem;--t-lg:   1.25rem;   --t-xl:   1.5rem;
  --t-2xl:  1.875rem; --t-3xl:  2.375rem;  --t-4xl:  3rem;

  --lh-tight: 1.15;   --lh-snug: 1.35;     --lh-body: 1.6;

  /* ---- Space / radius -------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* ---- Layout ---------------------------------------------------------- */
  --wrap: 1180px;
  --wrap-narrow: 840px;
  --announce-h: 34px;
  --header-h: 56px;
  --tabbar-h: 58px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --ease: cubic-bezier(.33, .9, .35, 1);
  --dur: 180ms;
}

@media (min-width: 900px) {
  :root { --header-h: 72px; }
}

/* ---- Dark theme --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:             #0E1714;
    --surface:        #16221E;
    --surface-2:      #1C2A25;
    --surface-sunken: #13201B;
    --card:           #16221E;

    --ink:            #E8F2EC;
    --ink-2:          #AFC4BA;
    --ink-3:          #88A094;
    --heading:        #6FD9A6;

    --line:           #27352F;
    --line-strong:    #33453D;

    --mint:           #13201B;
    --mint-100:       #1B2C24;
    --mint-50:        #0E1714;
    --sage:           #1D2E27;
    --paper:          #16221E;
    --paper-2:        #1C2A25;

    --brand:          #46C98A;
    --forest:         #0E8167;
    --forest-600:     #119576;
    --amber-200:      #3A2A17;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.45);
    --shadow-md: 0 6px 20px rgba(0,0,0,.5);
    --shadow-lg: 0 18px 44px rgba(0,0,0,.58);
  }
}

:root[data-theme="dark"] {
  --bg:             #0E1714;
  --surface:        #16221E;
  --surface-2:      #1C2A25;
  --surface-sunken: #13201B;
  --card:           #16221E;
  --ink:            #E8F2EC;
  --ink-2:          #AFC4BA;
  --ink-3:          #88A094;
  --heading:        #6FD9A6;
  --line:           #27352F;
  --line-strong:    #33453D;
  --mint:           #13201B;
  --mint-100:       #1B2C24;
  --mint-50:        #0E1714;
  --sage:           #1D2E27;
  --paper:          #16221E;
  --paper-2:        #1C2A25;
  --brand:          #46C98A;
  --forest:         #0E8167;
  --forest-600:     #119576;
  --amber-200:      #3A2A17;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.45);
  --shadow-md: 0 6px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.58);
}