/* ===========================================================================
   UNICCO — Design Tokens
   מקור אמת יחיד לצבע, טיפוגרפיה, מרווח וצללים.
   מיועד להיות מועתק כמו-שהוא ל-WordPress theme בשלב הבא.
   =========================================================================== */

:root {
  /* ---------------------------------------------------------------- color */
  --paper:        #FAF8F5;   /* רקע עמוד — אוף-וייט חמים, לא לבן קליני */
  --paper-2:      #F3EFE9;   /* רקע משני, אזורים מודגשים */
  --surface:      #FFFFFF;   /* כרטיסים, מגירות */
  --ink:          #1A1A18;   /* טקסט ראשי */
  --ink-2:        #3D3A35;   /* טקסט משני חזק */
  --muted:        #6E6A63;   /* טקסט משני */
  --muted-2:      #9A948B;   /* טקסט רמז, placeholder */
  --line:         #E6E1D9;   /* גבולות */
  --line-2:       #D5CEC3;   /* גבולות מודגשים */

  --cedar:        #1F4A38;   /* מותג ראשי, CTA — ירוק עמוק = טרי + יוקרתי */
  --cedar-700:    #17392B;   /* hover של כפתורים */
  --cedar-300:    #5E8973;
  --cedar-50:     #EDF3F0;

  /* רקעים גדולים: hero, footer, טיילים.
     בירוק זה יכול היה להיות אותו ערך כמו ה-hover, כי ירוק כהה עובד בשני התפקידים.
     בגוונים בהירים (ורוד למשל) hover ורקע מלא הם שני צבעים שונים לגמרי —
     ולכן זה טוקן נפרד, וכל ערכת נושא קובעת אותו בעצמה. */
  /* כינוי סמנטי לצבע המותג הראשי. היה מוגדר רק בערכות הנושא החלופיות
     (rose / blue / deep / mist), ולכן בערכת ברירת המחדל var(--brand)
     היה לא-מוגדר — וכל באנר שהשתמש בו קיבל רקע שקוף וטקסט לבן על
     רקע בהיר. כל ערכת נושא עדיין דורסת אותו. */
  --brand:        #1F4A38;

  --brand-deep:   #17392B;

  --brass:        #B8873F;   /* אקצנט יוקרה, תגיות, הדגשות */
  --brass-700:    #8E661C;
  --brass-50:     #F8F1E4;

  --terracotta:   #B4462F;   /* מבצע / דחיפות — במקום אדום צעקני */
  --terracotta-50:#FBEDE9;
  --success:      #2F7A55;
  --success-50:   #EAF4EE;
  --warning:      #A8761B;

  --focus:        #1F4A38;   /* טבעת פוקוס */

  /* ----------------------------------------------------------- typography */
  /* ⚠️⚠️ **הכל Leon — 23/09/2026.** הלקוח רכש רישיון (ללא הגבלת
     דומיינים), והורה לנתק את Google Fonts לחלוטין. Leon מתארח אצלנו
     ב-theme/unicco/assets/css/fonts.css.

     ⚠️ Heebo, Assistant ו-Frank Ruhl Libre הוסרו מהמחסניות ולא רק
     «הוזזו אחורה»: הם נטענו מגוגל, וגוגל נותק. שם גופן שאינו נטען
     ואינו מותקן במערכת אינו גיבוי — הוא שורה מתה שמסתירה את מה
     שבאמת יקרה (נפילה לגופן המערכת).

     ⚠️ Leon מכיל **רק 400 ו-700**, ו-291 גליפים. מחסנית המערכת
     שאחריו משמשת לתווים שאינו מכיר — נמדד: הוא מכסה עברית, ניקוד,
     לטינית, ₪ וכל הפיסוק הנפוץ. החריג היחיד שנמצא הוא U+00A0.

     ── ההיסטוריה, לא רלוונטית יותר אך מסבירה את הבחירות הקודמות ──
     Heebo (SIL OFL) נבחר כתחליף ל-Calibri שאינו ניתן להטמעה. Carlito,
     השכפול החופשי של Calibri, נבדק ונמצא ללא גליפים עבריים כלל.
     Heebo רחב ב-12% מ-Assistant שקדם לו, ולכן הפריסה נבדקה מחדש
     בהחלפה ההיא. */
  --font-display: 'Leon', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Leon', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* סולם טיפוגרפי — fluid, מתאים את עצמו בין מובייל לדסקטופ */
  --t-xs:   0.75rem;                                  /* 12 */
  --t-sm:   0.8125rem;                                /* 13 */
  --t-base: 0.9375rem;                                /* 15 — בסיס מובייל */
  --t-md:   1rem;                                     /* 16 */
  --t-lg:   clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  --t-xl:   clamp(1.25rem,  1.13rem + 0.6vw, 1.625rem);
  --t-2xl:  clamp(1.5rem,   1.28rem + 1.1vw, 2.25rem);
  --t-3xl:  clamp(1.875rem, 1.5rem  + 1.9vw, 3.25rem);

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

  /* ---------------------------------------------------------------- space */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* מרווח החוצה של העמוד — נדיב בדסקטופ, הדוק במובייל */
  --gutter: clamp(1rem, 0.6rem + 2vw, 3rem);
  --maxw:   1320px;
  --maxw-prose: 68ch;

  /* --------------------------------------------------------------- radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   22px;   /* באנרים ואריחים */
  --r-pill: 999px;

  /* רדיוס הפקדים: שדה החיפוש, רצועת הקטגוריות, הכפתורים.
     קודם כולם היו --r-pill, כלומר גלולות. עכשיו הם מלבנים עם פינות
     מעוגלות, מאותה משפחה כמו הבאנרים.

     לא 22px כמו הבאנר: אותו רדיוס על פקד בגובה 44px בולע כמעט את כל
     הצלע וחוזר להיראות גלולה. 12px הוא אותו יחס פינה-לגובה שיש לבאנר
     בגובה 216px, ולכן הצורה נקראת כאותה שפה בקנה מידה קטן.

     --r-pill נשאר בשימוש היכן שהעיגול הוא המשמעות ולא הקישוט:
     מונה הסל, פס ההתקדמות, ידית המגירה, ומדליוני האייקונים. */
  --r-ctl:    12px;
  --r-ctl-sm: 8px;   /* צ׳יפים ותוויות — נמוכים יותר, ולכן פינה קטנה יותר */

  /* רקע שדה החיפוש. היה --surface (לבן), ואז השדה נעלם על רקע בהיר.
     עכשיו הוא שקוע מעט מהדף — אותו רעיון של תיבת "יש לכם רשימת קניות",
     וכל ערכת נושא דורסת אותו לגוון המדויק שלה. */
  --field: var(--paper-2);

  /* -------------------------------------------------------------- shadow */
  --sh-1: 0 1px 2px rgba(26,26,24,.05);
  --sh-2: 0 2px 8px rgba(26,26,24,.07);
  --sh-3: 0 8px 28px rgba(26,26,24,.10);
  --sh-4: 0 20px 60px rgba(26,26,24,.16);

  /* --------------------------------------------------------------- motion */
  --e-out:  cubic-bezier(.22,.61,.36,1);
  --e-in:   cubic-bezier(.55,.06,.68,.19);
  --d-fast: 140ms;
  --d-base: 240ms;
  --d-slow: 420ms;

  /* --------------------------------------------------------------- layout */
  --header-h:  60px;   /* מובייל */
  --mobilebar-h: 62px; /* סרגל תחתון דביק */
  --z-header: 100;
  --z-bar:    120;
  --z-drawer: 200;
  --z-modal:  300;
  --z-toast:  400;
}

@media (min-width: 900px) {
  :root {
    --t-base: 1rem;
    --header-h: 76px;
    --mobilebar-h: 0px;
  }
}

/* מכבד את העדפת המערכת לצמצום תנועה */
@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; }
}

/* ---------------------------------------------------------------------------
   הפונט של הגרסה האנגלית

   האנגלית באתר צוירה ב-Assistant לפני המעבר ל-Heebo (נמדד: 686px,
   זהה למחסנית הישנה במלואה). ההחלפה ל-Heebo שינתה גם אותה, והמשתמש
   ביקש להחזיר את הקודמת.

   הקושי: ל-Assistant יש גם עברית וגם לטינית, ולכן הצבה שלו ראשון
   הייתה מבטלת את Heebo גם בעברית.

   ניסיתי קודם unicode-range עם קובץ Assistant לטיני בלבד; כתובות
   הקבצים של גוגל שחילצתי החזירו 404, וזו גם גישה שנשענת על כתובת
   שעלולה להשתנות. במקום זה — מחסנית לפי שפת התצוגה.

   האתר כבר מחליף lang על <html> בכל החלפת שפה, ולכן זה מדויק:
   בגרסה העברית הכל Heebo, בגרסה האנגלית הכל Assistant.

   הגבול הידוע: שם לועזי בתוך הגרסה העברית (KIRKLAND, PayPlus)
   ייוצג ב-Heebo, ומילה עברית שנשארה בגרסה האנגלית תיוצג ב-Assistant.
   שניהם פונטים שמכסים את שתי הכתבים, ולכן שום דבר לא נשבר.

   ⚠️⚠️ **כל האמור לעיל בוטל ב-23/09/2026.** Google Fonts נותק, ולכן
   Assistant אינו נטען עוד. הכלל נשאר במקומו — עם Leon — כדי שלא
   ייווצר הבדל טיפוגרפי בין עברית לאנגלית: Leon מכסה את שתי הכתבים,
   ולכן כל הבעיה שהכלל הזה נועד לפתור פשוט אינה קיימת יותר.
   --------------------------------------------------------------------------- */
:root[lang="en"] {
  --font-display: 'Leon', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Leon', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}