/* Fresh Flow design tokens. Source of truth for STYLE.md. Core CSS reads only the --wp-* contract tokens.
   Layers: primitive (--ff-*) → semantic (--wp-* contract + roles) → component (--wp-control-h, --wp-cta-h,
   --wp-radius-card/panel below; per-component values live in skin.css and are listed in STYLE.md). */
/* Heebo, self-hosted (assets/fonts, SIL OFL 1.1: OFL.txt). Variable 100–900, Google's subsets and unicode-ranges
   (Google Fonts API, Heebo v28). Same family name, so the Elementor kit and other plugins using "Heebo" get these files. */
@font-face{font-family:"Heebo";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/heebo-hebrew-var.woff2") format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Heebo";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/heebo-latin-ext-var.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Heebo";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/heebo-latin-var.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* ---------- Primitives: colour ---------- */
  --ff-blue-600: #1F5FE0;   /* Flow Blue */
  --ff-blue-700: #1749B8;   /* Flow Blue, pressed */
  --ff-navy-900: #132A5E;   /* Deep Ink */
  --ff-navy-950: #11255A;   /* Title Ink (product title) */
  --ff-navy-800: #1C2C55;   /* Tray Navy */
  --ff-navy-700: #2B3770;   /* Body Ink */
  --ff-slate-600: #455477;  /* Quiet Ink (descriptions) */
  --ff-slate-500: #56637F;  /* Muted Ink */
  --ff-lime-300: #DEF66F;   /* Fresh Lime */
  --ff-lime-200: #E7FA8A;   /* Fresh Lime, hover */
  --ff-lime-100: #ECFBBB;   /* Lime Mist (route card) */
  --ff-blue-50:  #EDF3FE;   /* Selected Wash */
  --ff-blue-40:  #EEF4FE;   /* Search Wash */
  --ff-blue-30:  #EFF4FE;   /* Category Sky */
  --ff-blue-20:  #F5F8FE;   /* Filter Band */
  --ff-blue-10:  #FAFAFD;   /* Page Mist */
  --ff-route-1:  #E1EBFD;   /* Route Blue */
  --ff-route-3:  #E6EEFD;   /* Route Haze */
  --ff-line-200: #D9E3F5;   /* Hairline */
  --ff-line-100: #E6ECF8;   /* Card Line */
  --ff-grey-100: #F3F3F4;   /* Image Well */
  --ff-chip:     #EAEBF2;   /* Chip Grey */
  --ff-white:    #FFFFFF;

  /* ---------- Semantic: the shared --wp-* contract (BUILDER-GUIDE §3) ---------- */
  --wp-c-primary: var(--e-global-color-primary, var(--ff-blue-600));
  --wp-c-primary-hover: var(--ff-blue-700);
  --wp-c-ink: var(--e-global-color-secondary, var(--ff-navy-900));
  --wp-c-text: var(--e-global-color-text, var(--ff-navy-700));
  --wp-c-muted: var(--ff-slate-500);
  --wp-c-accent: var(--e-global-color-accent, var(--ff-lime-300));
  --wp-c-accent-hover: var(--ff-lime-200);
  --wp-c-on-primary: var(--ff-white);
  --wp-c-page: var(--ff-blue-10);
  --wp-c-surface: var(--ff-blue-50);
  --wp-c-surface-2: var(--ff-blue-40);
  --wp-c-line: var(--ff-line-200);
  --wp-c-in-bg:#E7F7D2; --wp-c-in:#3A6A0C; --wp-c-out-bg:#FDECEC; --wp-c-out:#A12A1F; --wp-c-back:#8A4B00;
  --wp-radius-s: 8px; --wp-radius-m: 16px; --wp-radius-l: 24px; --wp-radius-pill: 999px;
  --wp-shadow-card: 0 2px 10px rgba(19,42,94,.06);
  --wp-shadow-hover: 0 24px 56px rgba(19,42,94,.12);
  --wp-font: "Heebo", system-ui, sans-serif;
  --wp-dur: .25s; --wp-ease: cubic-bezier(.2,.7,.2,1);

  /* ---------- Semantic: Fresh Flow roles ---------- */
  --wp-c-quiet: var(--ff-slate-600);
  --wp-c-title: var(--ff-navy-950);
  --wp-c-route-1: var(--ff-route-1);
  --wp-c-route-2: var(--ff-lime-100);
  --wp-c-route-3: var(--ff-route-3);
  --wp-c-band: #F6F8FC;
  --wp-c-cat-bg: var(--ff-blue-30);
  --wp-c-filter-bg: var(--ff-blue-20);
  --wp-c-tray: var(--ff-navy-800);
  --wp-c-chip: var(--ff-chip);
  --wp-c-img-bg: var(--ff-grey-100);
  --wp-c-card-line: var(--ff-line-100);
  --wp-c-focus: var(--ff-blue-600);

  /* ---------- Layout ---------- */
  --wp-container: 1280px;
  --wp-gutter: 24px;              /* 16px under 768px */
  --wp-radius-xs: 6px;            /* thumbnails, small pills */
  --wp-radius-card: 12px;         /* product cards, info cards */
  --wp-radius-panel: 16px;        /* hero card, route cards, product panel */

  /* Spacing scale (4px base) */
  --wp-space-1: 4px; --wp-space-2: 8px; --wp-space-3: 12px; --wp-space-4: 16px;
  --wp-space-5: 20px; --wp-space-6: 24px; --wp-space-8: 32px; --wp-space-10: 40px;
  --wp-space-12: 48px; --wp-space-16: 64px;

  /* Type scale */
  --wp-text-xs: 13px;   /* tags, captions */
  --wp-text-sm: 14px;   /* small labels, meta */
  --wp-text-md: 16px;   /* body, nav, buttons */
  --wp-text-lg: 18px;   /* lead text, card prices (sm) */
  --wp-text-xl: 20px;   /* prices, card titles (lg) */
  --wp-text-2xl: 24px;  /* route titles, info-card titles */
  --wp-text-3xl: 30px;  /* section H2 */
  --wp-text-4xl: 40px;  /* product H1 */
  --wp-text-h1: clamp(36px, 4vw, 56px); /* hero and category H1 */

  /* Controls */
  --wp-control-h: 44px;  /* inputs, selects, pills, buttons (min touch target) */
  --wp-cta-h: 48px;      /* primary CTAs */
}
@media (max-width: 767px){ :root{ --wp-gutter: 16px; } }
@media (prefers-reduced-motion: reduce){ :root{ --wp-dur: 0s } }