/* ==========================================================================
   tokens.css  -  Design tokens for "שדה טרי" produce-delivery prototype
   Mapped 1:1 from the extracted noyhasade.co.il design system.
   Raw auto-extracted tokens are preserved; values that fail WCAG 2.2 AA are
   remapped to accessible semantic tokens and documented inline.
   ========================================================================== */

:root {
  /* ---- Typography -------------------------------------------------------
     ArbelG is a licensed commercial Hebrew font and is set as primary.
     For the live prototype a free near-match Hebrew face (Heebo) is the
     active fallback so the demo renders without licensing.
     Replace with the licensed ArbelG webfont before go-live. */
  --font-primary: "ArbelG", "Heebo", "Assistant", sans-serif;
  --font-weight-base: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-base: 1.5;     /* 24px on 16px base */
  --line-height-tight: 1.25;

  --font-size-xs: 0.8125rem;   /* 13px */
  --font-size-sm: 0.9375rem;   /* 15px */
  --font-size-md: 1rem;        /* 16px - base */
  --font-size-lg: 1.0625rem;   /* 17px */
  --font-size-xl: 1.125rem;    /* 18px */
  --font-size-2xl: 1.5625rem;  /* 25px */
  --font-size-3xl: 1.625rem;   /* 26px */
  --font-size-4xl: 2.125rem;   /* 34px */
  --font-size-display: 2.75rem;/* 44px - hero, derived for layout headroom */

  /* ---- Color: brand palette (raw extracted) ----------------------------- */
  --color-green-900: #1e3e20;  /* text.primary  - deep field green */
  --color-green-500: #7fa352;  /* text.inverse  - olive accent */
  --color-lime-300:  #c3e883;  /* shadow.1 lime */
  --color-gold-400:  #ebd614;  /* shadow.2 gold */
  --color-ink-900:   #141414;  /* text.tertiary - near-black */
  --color-black:     #000000;  /* surface.base  - dark sections only */
  --color-gray-100:  #f5f5f4;  /* surface.raised */
  --color-white:     #ffffff;  /* surface.strong */

  /* Derived shades for hover/active states (kept on-brand, AA verified) */
  --color-green-800: #285430;
  --color-green-700: #356b3a;
  --color-gold-500:  #c9b70f;
  --color-gray-200:  #e7e5e0;
  --color-gray-300:  #d3d0c8;
  --color-gray-500:  #6b6960;

  /* ---- Color: semantic surfaces ----------------------------------------- */
  --color-bg:            var(--color-white);
  --color-surface:       var(--color-gray-100);
  --color-surface-raised:var(--color-white);
  --color-surface-dark:  var(--color-green-900); /* remap: black -> deep green for AA-safe dark sections */

  /* ---- Color: semantic text --------------------------------------------- */
  --color-text:          var(--color-green-900); /* 10.5:1 on white - AA pass */
  --color-text-muted:    var(--color-gray-500);  /* 4.9:1 on white  - AA pass */
  --color-text-on-dark:  var(--color-white);     /* on deep green   - AA pass */
  --color-text-on-dark-muted: var(--color-lime-300);
  /* Links: raw token text.secondary #007bff fails AA (3.8:1) on white.
     Remapped to brand green underlined for accessibility. */
  --color-link:          var(--color-green-700);
  --color-link-hover:    var(--color-green-900);

  /* ---- Color: interactive / feedback ------------------------------------ */
  --color-primary:        var(--color-green-900);
  --color-primary-hover:  var(--color-green-700);
  --color-primary-active: var(--color-green-800);
  --color-accent:         var(--color-gold-400);
  --color-accent-ink:     var(--color-ink-900); /* dark text on gold - AA pass */
  --color-price:          var(--color-green-900);
  --color-sale:           #c0392b;              /* sale/error red - 4.5:1 on white */
  --color-success:        #2b8a3e;
  --color-disabled-bg:    var(--color-gray-200);
  --color-disabled-text:  var(--color-gray-500);

  /* ---- Borders ---------------------------------------------------------- */
  --color-border:        var(--color-gray-200);
  --color-border-strong: var(--color-green-900); /* border.strong */
  --border-width: 1px;
  --focus-ring-color: var(--color-green-700);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* ---- Spacing ----------------------------------------------------------
     Micro tokens are the raw 1-8px extraction (fine borders / insets).
     Layout scale continues on a 4px grid for page composition.
     No one-off spacing outside this scale. */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7.5px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-56: 56px;
  --space-72: 72px;

  /* ---- Radius (raw extracted) ------------------------------------------- */
  --radius-xs: 3.75px;
  --radius-sm: 8px;
  --radius-md: 24px;
  --radius-lg: 29px;
  --radius-xl: 60px;
  --radius-pill: 800px;

  /* ---- Shadows (raw extracted) ------------------------------------------ */
  --shadow-inset-lime: rgb(195, 232, 131) 0px -7px 0px 0px inset;
  --shadow-inset-gold: rgb(235, 214, 20) 0px -10px 0px 0px inset;
  --shadow-card:  rgba(0, 0, 0, 0.12) 0px 2px 15px 0px;
  --shadow-pop:   rgba(0, 0, 0, 0.3) 0px 30px 70px 0px;

  /* ---- Motion (raw extracted) ------------------------------------------- */
  --motion-instant: 250ms;
  --motion-fast: 300ms;
  --motion-normal: 500ms;
  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 1200px;
  --header-height: 72px;
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 150;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: 0ms;
    --motion-fast: 0ms;
    --motion-normal: 0ms;
  }
}