/* ==================================================================
   Beast — טוקנים
   כל צבע, גודל ומרווח באתר מגיע מכאן. משנים כאן, משתנה בכל מקום.
   ================================================================== */

:root{

  /* --- צבע --- */
  --c-orange:        #F14B1C;   /* מהלוגו */
  --c-orange-deep:   #C93A0F;
  --c-ink:           #0A0A0A;   /* טקסט ראשי */
  --c-graphite:      #2B2B2B;   /* פאנלים כהים, רקע תמונות מוצר */
  --c-slate:         #8A8A8A;   /* טקסט משני */
  --c-hairline:      #E6E6E6;   /* קווי הפרדה ומסגרות */
  --c-canvas:        #FFFFFF;   /* רקע העמוד */
  --c-surface:       #FFFFFF;   /* רקע כרטיסים */

  /* --- טיפוגרפיה --- */
  --font:         'Heebo', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Karantina', var(--font);   /* כותרת הפתיחה בלבד */

  --t-hero:    clamp(2.6rem, 7vw, 4.75rem);
  /* כותרת סקשן — סקאלה נזילה אחת לכל הכותרות באתר.
     יורדת ל-~20px במסך 320 ועולה ל-36px בדסקטופ, כך שגם
     "מחכים לכם בסניפים שלנו" נשארת על שורה אחת בנייד.
     רוצה כותרות גדולות/קטנות יותר? זו השורה היחידה לשנות. */
  --t-section: clamp(1.125rem, .82rem + 1.45vw, 1.75rem);
  --t-card:    1.75rem;
  --t-lead:    1.15rem;
  --t-body:    1rem;
  --t-small:   .95rem;

  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;
  --w-black:   900;

  /* --- מרווחים --- */
  --s-1: 6px;
  --s-2: 12px;
  --s-3: 20px;
  --s-4: 28px;
  --s-5: 44px;
  --s-6: 72px;
  --s-7: 110px;

  /* --- מבנה --- */
  --wrap: 1280px;
  --gutter: 20px;

  --r-card:  24px;
  --r-media: 20px;
  --r-pill:  10px;

  /* --- חתימת המותג: פינות קטומות --- *
   * מלבן עם פינות חדות, קטימה באלכסון בשמאל-עליון ובימין-תחתון.
   * --cut  = אורך הקטימה. משנים כאן, משתנה בכל כפתור באתר.
   * --edge = עובי המסגרת בגרסה עם קו מתאר.
   */
  --cut:  12px;
  --edge: 2px;

  --cut-shape: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );

  /* מעבר כתום עדין, כמו בכפתורי המקור */
  --g-orange:      linear-gradient(100deg, #F1651F 0%, #E24B10 100%);
  --g-orange-hover: linear-gradient(100deg, #E24B10 0%, #C93A0F 100%);

  --shadow-card: 0 1px 2px rgba(0,0,0,.04);

  /* --- הסוגר של כותרות הסקשן ---
   * קו כתום אחד שיורד בצד ופונה לאורך התחתית, עם פינה מעוגלת בחיבור.
   * הטקסט יושב על קופסה בגוון קרם, טיפה שונה מרקע העמוד.
   */
  --rule:       1px;    /* נמדד מהמוקאפ: קו דק */
  --rule-round: 3px;    /* עיגול הפינה שבה הקו פונה */
  --rule-rise:  0px;    /* הקופסה צמודה לראש הסוגר */
  --rule-drop:  9px;    /* הידית לגובה: גדול יותר = הקופסה גבוהה יותר בתוך הסוגר */
  --rule-gap:   8px;    /* המרווח בין הקו האנכי לקופסה */
  --rule-run:   100%;   /* אורך הזרוע התחתונה. 100% = לכל רוחב הכותרת */

  /* הקופסה הקרמית שמתחת לטקסט */
  --c-plate:     #F6F2EC;
  --plate-pad-i: 40px;  /* ריפוד בצדדים */
  --plate-pad-b: 23px;  /* ריפוד למעלה ולמטה */
  --plate-cut:   12px;  /* הקטימה בפינות, באותה שפה של הכפתורים */

  /* קטימה גדולה יותר לתמונות ולפאנלים */
  --cut-media: 20px;
  --cut-media-shape: polygon(
    var(--cut-media) 0,
    100% 0,
    100% calc(100% - var(--cut-media)),
    calc(100% - var(--cut-media)) 100%,
    0 100%,
    0 var(--cut-media)
  );

  /* --- סקשן שירות ומעבדה --- */
  --svc-pad:   42px;    /* הריפוד בתוך הכרטיס האמצעי */
  --feat-icon: clamp(56px, 8vw, 112px);
  --feat-offset: 8px;   /* כמה קו המתאר הכתום מוסט בכרטיסי הנייד */

  --plate-shape: polygon(
    var(--plate-cut) 0,
    100% 0,
    100% calc(100% - var(--plate-cut)),
    calc(100% - var(--plate-cut)) 100%,
    0 100%,
    0 var(--plate-cut)
  );

  /* כפתור וואטסאפ צף */
  --wa-size: 60px;

  /* --- סקשן הקטגוריות ---
   * כל המספרים נמדדו מצילומי המוקאפ: רשת 770/375/375 עם רווח 20,
   * קטימה 18 על האריח, כפתור חיצים 54 בהיסט 15 מהפינה השמאלית.
   */
  --c-plate-deep:       #EDE3D7;  /* הכרטיס הקרם — חם ועמוק מ---c-plate */
  --c-tile-dark:        #15100F;  /* הכרטיס הכהה */
  --c-tile-title:       #F7EFE3;  /* כותרת על רקע כהה — לבן חמים, לא #FFF */
  --c-tile-eyebrow:     #B3ACA4;  /* כיתוב מקדים על כהה */
  --c-tile-eyebrow-ink: #6B5F58;  /* כיתוב מקדים על קרם */

  --cat-gap:      var(--s-3);   /* 20px */
  --cat-badge:    54px;
  --cat-badge-in: 15px;         /* היסט הכפתור מהפינה */
  --cat-pad-i:    26px;         /* ריפוד הטקסט בצדדים */
  --cat-pad-b:    28px;         /* ריפוד הטקסט מלמטה */

  --header-h: 110px;     /* שורת הלוגו */
  --nav-h: 64px;         /* שורת התפריט */

  /*
   * הגובה האמיתי שהראש הקבוע תופס (באנר + לוגו + קטגוריות).
   * הבאנר יכול להיות שורה אחת או שתיים, ולכן הערך לא קבוע —
   * theme.js מודד את הבלוק ומעדכן את המשתנה. זה רק ערך פתיחה.
   */
  --head-actual: 212px;
}

@media (max-width: 700px){
  :root{ --header-h: 82px; --nav-h: 50px; }
}