/*
 * Design Deal - טוקני עיצוב
 * מקור האמת: "Design Deal - מדריך מותג חדש (offline).html", גרסה 2026.
 * אין hex קשיח בשום קובץ אחר בתבנית. משנים כאן, משתנה בכל מקום.
 *
 * רוח המדריך: לבן נקי כבסיס, שמנת למשטחים, טורקיז פסטל יחיד ורך,
 * והטקסט תמיד שחור. אין צבע מותג חזק - ההיררכיה נבנית ממשקל גופן
 * וממסגרות דקות, לא מצבע ולא מצללים.
 */

:root {
  /* ── בסיס - לבן ושמנת ──────────────────────────── */
  --dd-white:           #FFFFFF;   /* בסיס · רקע תמונות מוצר */
  --dd-cream:           #FBF6EC;   /* שמנת בהירה · כרטיסים */
  --dd-cream-section:   #F4F1EA;   /* שמנת מקטע · פוטר ופסי רוחב */
  --dd-cream-warm:      #EFE6D6;   /* שמנת חמה */

  /* ── אקצנטים - טורקיז פסטל וירוק וואטסאפ ───────── */
  --dd-pastel:          #DFF5F1;   /* מילוי כפתורים ועיגולי אייקונים */
  --dd-pastel-border:   #CFEAE4;   /* מסגרת פסטל */
  --dd-hairline:        #EDE7DB;   /* מסגרת שמנת - קו ההפרדה הראשי */
  --dd-hairline-soft:   #EFE4D2;   /* מסגרת שמנת בהירה - פאנלים */
  /*
   * שני הקווים האלה כהים מהשניים שמעליהם כי הרקע שלהם שמנת ולא לבן.
   * קו של #EDE7DB על #F4F1EA כמעט נעלם, וכל ההפרדה בפוטר נשענת עליו.
   */
  --dd-hairline-deep:   #DED5C2;   /* קווי ההפרדה בפוטר */
  --dd-rule-strong:     #C9BFA8;   /* מסגרת המדליון ושדה הניוזלטר */
  --dd-whatsapp:        #25D366;
  --dd-whatsapp-hover:  #1FB855;

  /*
   * ── רצועת המרקיזה ──────────────────────────────
   * המשטח הכהה השני באתר, לצד הלייטבוקס של ה-360.
   *
   * מיתוג 2026 קבע שהלייטבוקס הוא היחיד. ההכרעה עודכנה ב-23/07: הרצועה
   * היא הפס העליון של כל דף, ומשטח כהה שם עובד כמסגרת שמגדירה את גבול
   * הדף - תפקיד שונה מאספרסו כרקע לפוטר או לטופס, שהוא מה שהמיתוג ביטל.
   * טקסט על רקע זה: 12.6:1, עובר AAA.
   */
  --dd-strip:           #14303A;
  --dd-strip-text:      #EAF7FA;
  --dd-strip-star:      #7FD8CC;

  /* ── טקסט ──────────────────────────────────────── */
  --dd-ink:             #111111;   /* שחור - טקסט וכל מצב נבחר */
  --dd-ink-soft:        #333333;   /* ריחוף על קישור */
  --dd-body:            #444444;   /* אפור משני */
  --dd-muted:           #666666;   /* אפור מעומעם */
  /*
   * האפור החם של דף הקטגוריה. קובץ העיצוב נוקב ב-#9A9382, שהוא 3.06:1
   * על לבן ו-2.84:1 על שמנת - מתחת ל-4.5:1, והוא נושא שם מידע אמיתי:
   * מוני הסינון, מספר הביקורות והמחיר הקודם. הוכהה ב-24% בשמירת יחסי
   * הערוצים, ולכן הגוון החם נשמר. 4.95:1 על לבן, 4.60:1 על שמנת -
   * המינימום שעובר על שני הרקעים. אותה שיטה שבה הוכהה הזהב ב-22/07.
   */
  --dd-muted-warm:      #757063;
  /*
   * זהב - כוכבי דירוג בלבד.
   * המדריך נוקב ב-#D69A4E, אבל על לבן הוא 2.44:1 ועל שמנת 2.17:1 - מתחת
   * לסף 3:1 של WCAG לאלמנט גרפי, כלומר הכוכבים דהויים למי שרואה פחות טוב.
   * הוכהה ב-12% בהירות בלבד; הגוון (34°) והרוויה נשמרו, ולכן זה עדיין
   * אותו זהב ולא חום. עכשיו 3.48:1 על לבן ו-3.09:1 על שמנת - עובר בשניהם.
   */
  --dd-gold:            #BB7C2B;
  /*
   * הזהב על משטח כהה. הכהיה נועדה לפתור ניגודיות על לבן, ועל שחור
   * היא עובדת הפוך - #BB7C2B על #111111 הוא 3.2:1 בלבד. ערך המדריך
   * המקורי נותן שם 4.6:1, ולכן הוא נשאר בתפקיד הזה.
   */
  --dd-gold-on-dark:    #D69A4E;
  --dd-danger:          #B4432B;   /* טקסט שגיאה בטפסים */

  /*
   * עץ - לסכמות שמתארות את המוצר עצמו ולא את הממשק.
   * נדגם מטקסטורת האגוז, כדי שהסכמה והרינדורים יתארו את אותו רהיט.
   * זה אינו צבע מותג ואין להשתמש בו לרכיבי ממשק.
   */
  --dd-wood:            #A87E5C;
  --dd-wood-dark:       #7E5B3E;   /* קצה ומסגרת של אותו עץ */

  /*
   * שמות שהתבנית צורכת בשמותיהם הישנים. המיפוי נשאר כאן במכוון:
   * הוא מונע גל של שינויי-שם ב-11 קובצי CSS, ומרכז את ההחלטה
   * "מה החליף את הטרהקוטה" בשורה אחת שאפשר לקרוא.
   */
  --dd-accent:          var(--dd-ink);       /* מצב נבחר · טבעת פוקוס */
  --dd-accent-fill:     var(--dd-pastel);    /* מילוי של מצב נבחר */
  --dd-surface:         var(--dd-cream);     /* משטח מוגבה על לבן */
  --dd-surface-warm:    var(--dd-cream-warm);
  --dd-stage:           var(--dd-white);     /* במת הגלריה - הרינדורים על לבן טהור */
  --dd-overlay:         #111111;             /* כיסוי לייטבוקס - התפקיד היחיד שנשאר כהה */

  /* ניטרליים, מכהה לבהיר */
  --dd-n-900:           #111111;
  --dd-n-700:           #444444;
  --dd-n-500:           #666666;
  --dd-n-300:           #B8B2A6;
  --dd-n-200:           #EFE4D2;
  --dd-n-100:           #FBFAF7;

  /* ── טיפוגרפיה ─────────────────────────────────── */
  --dd-font: 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* סקאלת המדריך: 40/800 · 26/800 · 18/700 · 16/400 · 13/500.
     ה-clamp מחזיק את הקצה העליון על ערכי המדריך ומצמצם במובייל. */
  --dd-fs-hero:    clamp(1.75rem, 1.15rem + 2.2vw, 2.5rem);   /* → 40px */
  --dd-fs-h2:      clamp(1.35rem, 1.05rem + 1.2vw, 1.625rem); /* → 26px */
  --dd-fs-h3:      clamp(1.05rem, .95rem + .45vw, 1.125rem);  /* → 18px */
  --dd-fs-body:    1rem;                                      /*   16px */
  --dd-fs-sm:      .875rem;                                   /*   14px */
  --dd-fs-xs:      .8125rem;                                  /*   13px */

  --dd-lh-tight:   1.2;
  --dd-lh-body:    1.6;

  --dd-fw-regular: 400;
  --dd-fw-medium:  500;
  --dd-fw-bold:    700;
  --dd-fw-xbold:   800;   /* כותרות - המדריך מבקש 800, לא 900 */
  --dd-fw-black:   900;   /* הלוגו בלבד */

  /* ── מרווחים - סקאלה של 4 ──────────────────────── */
  --dd-s-1: .25rem;  --dd-s-2: .5rem;   --dd-s-3: .75rem;
  --dd-s-4: 1rem;    --dd-s-5: 1.25rem; --dd-s-6: 1.5rem;
  --dd-s-8: 2rem;    --dd-s-10: 2.5rem; --dd-s-12: 3rem;
  --dd-s-16: 4rem;   --dd-s-20: 5rem;

  --dd-section-y: clamp(2.5rem, 1.5rem + 4vw, 5rem);

  /* ── רדיוסים - לפי המדריך ──────────────────────── */
  --dd-r-sm:   10px;  /* תגיות משקל גופן */
  --dd-r-md:   14px;  /* כפתור ראשי */
  --dd-r-lg:   18px;  /* כפתור משני */
  --dd-r-card: 16px;  /* כרטיס צבע */
  --dd-r-xl:   20px;  /* פאנל */
  --dd-r-pill: 999px;

  /* ── מסגרת - שפת ההפרדה של המדריך ──────────────── */
  --dd-border:      1.5px solid var(--dd-hairline-soft);
  --dd-border-soft: 1px solid var(--dd-hairline);

  /*
   * צללים - המדריך לא משתמש בהם, וההפרדה נעשית במסגרות.
   * נשארו שני צללים בלבד, לאלמנטים שבאמת מרחפים מעל התוכן
   * (בר דביק, לייטבוקס). שם מסגרת לא מספיקה כדי לקרוא כשכבה.
   */
  --dd-shadow-sm: none;
  --dd-shadow-md: none;
  --dd-shadow-lg: 0 12px 40px rgba(17, 17, 17, .16);
  --dd-shadow-float: 0 2px 12px rgba(17, 17, 17, .08);

  /* ── פריסה ─────────────────────────────────────── */
  --dd-container: 1180px;
  --dd-gutter: clamp(1rem, .5rem + 2vw, 2rem);

  /* ── תנועה ─────────────────────────────────────── */
  --dd-ease: cubic-bezier(.4, 0, .2, 1);
  --dd-t-fast: 150ms;
  --dd-t-base: 250ms;
  --dd-t-slow: 400ms;

  /*
   * ── שכבות ─────────────────────────────────────────
   * ההדר החדש דורש חמש רמות ולא שלוש. הערכים בקובץ העיצוב
   * (110/120/150/180/220) לא מתיישבים עם הסקאלה, ולכן הומרו לשמות
   * שאומרים מה הם. הלייטבוקס נשאר מעל הכל - הוא חייב לכסות גם מגירה.
   */
  /*
   * הרקע המעומעם יושב *מתחת* להדר ולא מעליו.
   * הוא נועד לעמעם את התוכן, לא את התפריט. כשהוא היה מעל (105 מול 100)
   * הוא כיסה את פס הקטגוריות ברגע שהפאנל נפתח, ומעבר בין קטגוריות
   * בריחוף הפסיק לעבוד - כולל לחיצה, שנחסמה לגמרי.
   */
  --dd-z-backdrop:  90;
  --dd-z-header:    100;
  --dd-z-mobilebar: 150;
  --dd-z-bottombar: 200;
  --dd-z-drawer:    300;
  /*
   * הבר התחתון מעל המגירה, ולא מתחתיה.
   * הכרעת 23/07: המגירה מכסה 75% מהמסך ונפתחת מהידית שעל הבר -
   * ידית שנעלמת ברגע שהיא נלחצת מנתקת את המבקר מהדבר שהוא לחץ עליו.
   */
  --dd-z-bbar:      310;
  --dd-z-modal:     1000;

  /* שמות שהתבנית צורכת בשמותיהם הישנים. */
  --dd-z-sticky: var(--dd-z-header);
  --dd-z-fab:    var(--dd-z-bottombar);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dd-t-fast: 0ms; --dd-t-base: 0ms; --dd-t-slow: 0ms; }
}