/* ============================================================
   Design tokens : "Warm light editorial" coffee brand system
   Single source of truth for color, type, spacing, motion.
   RTL-first (Hebrew). Used by every page.
   ============================================================ */
:root{
  /* ---- Color: neutrals & surfaces ---- */
  --paper:#FAF4EA;        /* page background (warm off-white) */
  --paper-2:#F3E9D8;      /* alternating band / subtle fill  */
  --surface:#FFFDF9;      /* cards / raised surfaces          */
  --ink:#241A14;          /* primary text (espresso)          */
  --muted:#6E5D50;        /* secondary text                   */
  --hair:#EADFCB;         /* hairline dividers                */
  --line:#E0D3BC;         /* card borders                     */

  /* ---- Color: brand accents ---- */
  --accent:#B5451B;       /* burnt amber, CTA fills, large    */
  --accent-strong:#9A3A15;/* pressed amber                    */
  --accent-ink:#8F3313;   /* amber for SMALL text on paper (AA)*/
  --accent-2:#3E5C4A;     /* deep pine, education accent      */
  --cocoa:#3A2318;        /* deep-roast brown, CTA banner fill */
  --crema:#EBD9BE;        /* warm fill / chips                */
  --crema-deep:#D8BE93;   /* warm border on cream chips       */

  /* ---- Color: dark bands (hero / story) ---- */
  --espresso:#1A1210;     /* dark band background             */
  --espresso-2:#241813;   /* dark card on dark band           */
  --on-dark:#F6EEE1;      /* text on dark                     */
  --on-dark-muted:#C4B2A0;/* muted text on dark               */
  --ember:#E5733A;        /* amber accent that pops on dark   */
  --sage:#9DBFA8;         /* pine that pops on dark           */

  /* ---- Color: semantic ---- */
  --ok:#4F7A4B;           /* positive / in-budget             */
  --ok-soft:#E7F0E4;
  --ok-ink:#2F6B2A;       /* AA heading on --ok-soft          */
  --star:#C98A25;         /* rating gold                      */
  --pine-soft:#E6EDE7;    /* pine chip fill                   */
  --pine-line:#BBD0C0;    /* pine chip border                 */

  /* ---- Roast meter (shared across home / catalog / recipe) ---- */
  --roast-dot:10px;       /* dot size                         */
  --roast-dot-on:var(--accent);
  --roast-dot-off:var(--line);

  /* ---- Typography ---- */
  --display:"Frank Ruhl Libre",Georgia,"Times New Roman",serif;
  --body:"Heebo","Segoe UI",system-ui,-apple-system,sans-serif;
  /* fluid type scale (mobile → desktop) */
  --fs-display:clamp(2.6rem,7vw,4.5rem);   /* hero H1        */
  --fs-h1:clamp(2rem,5vw,3.1rem);          /* section titles */
  --fs-h2:clamp(1.55rem,3.6vw,2.25rem);
  --fs-h3:clamp(1.2rem,2.2vw,1.5rem);
  --fs-lead:clamp(1.05rem,1.6vw,1.28rem);  /* intros         */
  --fs-h4:1.15rem;                          /* sub-heading    */
  --fs-body:1.0625rem;                      /* 17px           */
  --fs-sm:0.9375rem;                        /* 15px           */
  --fs-xs:0.8125rem;                        /* 13px           */
  --fs-caption:0.78rem;                     /* 12.5px, tags   */
  --lh-tight:1.12;
  --lh-body:1.7;                            /* generous for Hebrew */

  /* ---- Spacing scale (4/8) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* ---- Layout ---- */
  --container:1200px;
  --container-narrow:820px;
  --gutter:clamp(20px,5vw,48px);
  --section-y:clamp(56px,9vw,112px);

  /* ---- Radius ---- */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --r-card:var(--r-lg);   /* recipe/content cards */
  --r-ctrl:var(--r-md);   /* recipe controls/chips */

  /* ---- Shadow (soft, warm) ---- */
  --sh-1:0 1px 2px rgba(60,38,22,.06),0 2px 8px rgba(60,38,22,.05);
  --sh-2:0 6px 18px rgba(60,38,22,.09),0 2px 6px rgba(60,38,22,.05);
  --sh-3:0 18px 46px rgba(40,24,12,.16),0 4px 14px rgba(40,24,12,.08);
  --sh-dark:0 24px 60px rgba(0,0,0,.5);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-1:.16s; --dur-2:.28s; --dur-3:.5s;

  /* ---- Z ---- */
  --z-header:100; --z-drawer:200; --z-overlay:190;
}