/* ============================================================
   STAV — Design Tokens (Global) / טוקנים גלובליים
   ------------------------------------------------------------
   מקור האמת היחיד לכל הגלובליות של האתר.
   כל הערכים נשאבו 1:1 ממשתני Figma ("סתיו ברדה — 2026"),
   משתי קולקציות:

   1) brand       — פרימיטיבים (mode יחיד): רמפת צבעים + רמפת מספרים.
   2) responsive  — סמנטי, עם שני מצבים: Desktop / Mobile.
        ב-CSS: Desktop = ברירת מחדל ב-:root ; Mobile = override ב-@media (≤768px).

   סטטוס: צבעים, טיפוגרפיה, spacing, padding, radius, section-padding — סופיים (Figma).
   צללים (shadows): ל-Figma אין effect styles כלל — הערכים כאן הם ברירת-מחדל מקומית.
   ============================================================ */

/* ------------------------------------------------------------
   גופנים / Fonts  —  ⭐ מקור-אמת יחיד להחלפת גופן ⭐
   כדי להחליף את גופן האתר: ערוך אך ורק את --font-display ו--font-body
   למטה. כל ה-CSS מפנה אליהם (אין font-family קשיח בשום מקום).

   כותרות: "Fb Hachaluzim" (נטען למטה) · גוף: "Google Sans" (עדיין fallback ל-Heebo)
   ⚠️ כרגע יש רק משקל Regular ל-Fb Hachaluzim. כשיגיעו משקלים נוספים
   (Medium/Bold) או גופן הגוף — הוסף @font-face נוסף לכל משקל והשמות ייתפסו אוטומטית.
   ------------------------------------------------------------ */

/* Fb Hachaluzim — גופן הכותרות. כרגע Regular (400) בלבד;
   משקלים כבדים יותר (--fw-medium/-bold בכותרות) מסונתזים ע"י הדפדפן. */
@font-face {
  font-family: "Fb Hachaluzim";
  src: url("../fonts/fb-hachaluzim-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ============================================================
     שכבה 1 — PRIMITIVES (קולקציית brand)
     ============================================================ */

  /* ---- צבעים / Colors ---- */

  /* Primary — נייבי/תכלת */
  --color-primary-50:  #F2F8FD;
  --color-primary-200: #C5E0F2;
  --color-primary-500: #328CC5;
  --color-primary-700: #105E7A;
  --color-primary-800: #124E67;
  --color-primary-900: #042838;

  /* Secondary — חול/זהב/חום */
  --color-secondary-50:  #F9F7F3;
  --color-secondary-200: #E2DAC6;
  --color-secondary-500: #C2AD89;
  --color-secondary-700: #A07D56;
  --color-secondary-800: #6D533F;
  --color-secondary-900: #594535;

  /* Neutral — Slate */
  --color-neutral-white: #FFFFFF;
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;

  /* בסיס / Base */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* תאימות לאחור: אין ב-Figma primary-600/950 — ממופים לערך הקרוב */
  --color-primary-600: var(--color-primary-700);
  --color-primary-950: var(--color-primary-900);

  /* תאימות לאחור: gray-* → Neutral */
  --color-gray-50:  var(--color-neutral-50);
  --color-gray-100: var(--color-neutral-100);
  --color-gray-200: var(--color-neutral-200);
  --color-gray-300: var(--color-neutral-300);
  --color-gray-400: var(--color-neutral-400);
  --color-gray-500: var(--color-neutral-500);
  --color-gray-600: var(--color-neutral-600);
  --color-gray-700: var(--color-neutral-700);
  --color-gray-800: var(--color-neutral-800);
  --color-gray-900: var(--color-neutral-900);

  /* ---- רמפת מספרים גנרית / Scales (brand "scales") ---- */
  --scale-0: 0;     --scale-1: 1;     --scale-2: 2;     --scale-4: 4;
  --scale-6: 6;     --scale-8: 8;     --scale-12: 12;   --scale-14: 14;
  --scale-16: 16;   --scale-18: 18;   --scale-20: 20;   --scale-24: 24;
  --scale-30: 30;   --scale-32: 32;   --scale-34: 34;   --scale-40: 40;
  --scale-42: 42;   --scale-54: 54;   --scale-60: 60;   --scale-64: 64;
  --scale-80: 80;   --scale-94: 94;   --scale-100: 100; --scale-120: 120;
  --scale-140: 140; --scale-160: 160; --scale-200: 200; --scale-220: 220;
  --scale-240: 240;

  /* ============================================================
     שכבה 2 — SEMANTIC (קולקציית responsive)  ·  ערכי Desktop
     ============================================================ */

  /* ---- צבעי משטח / Surface (alias אל primitives) ---- */
  --color-surface-white:                    var(--color-neutral-white);
  --color-surface-on-action:                var(--color-primary-50);   /* #F2F8FD */
  --color-surface-section-fill-0:           var(--color-primary-50);   /* #F2F8FD — סקשן בהיר */
  --color-surface-section-fill-1:           var(--color-primary-800);  /* #124E67 — סקשן כהה (קוביות) */
  --color-surface-action-primary:           var(--color-primary-700);  /* #105E7A — CTA ראשי */
  --color-surface-action-secondary-surface: var(--color-secondary-500);/* #C2AD89 — זהב */
  --color-surface-action-secondary-text:    var(--color-neutral-500);  /* #64748B */
  --color-surface-text-disabled:            var(--color-neutral-300);  /* #CBD5E1 */
  --color-surface-stroke-disabled:          var(--color-neutral-200);  /* #E2E8F0 */
  --color-surface-stroke-action-primary:    var(--color-primary-200);  /* #C5E0F2 */
  --color-surface-stroke-action-secondary:  var(--color-primary-200);  /* #C5E0F2 */

  /* תאימות לאחור: שמות --surface-* בשימוש בסקשנים */
  --surface-white:                    var(--color-surface-white);
  --surface-on-action:                var(--color-surface-on-action);
  --surface-section-fill-0:           var(--color-surface-section-fill-0);
  --surface-section-fill-1:           var(--color-surface-section-fill-1);
  --surface-action-primary:           var(--color-surface-action-primary);
  --surface-action-secondary:         #231F20; /* בסיס כהה — לא קיים כמשתנה ב-Figma המקומי */
  --surface-action-secondary-surface: var(--color-surface-action-secondary-surface);
  --surface-action-secondary-text:    var(--color-surface-action-secondary-text);
  --surface-stroke-action:            var(--color-surface-stroke-action-primary);

  /* ---- סמנטיים כלליים / Semantic ---- */
  --color-primary:       var(--color-surface-action-primary);  /* #105E7A */
  --color-primary-hover: var(--color-primary-900);
  --color-secondary:     var(--color-secondary-500);
  --color-accent:        var(--color-surface-action-primary);
  --color-accent-hover:  var(--color-primary-900);

  --color-bg:         var(--color-white);
  --color-bg-alt:     var(--color-neutral-50);   /* #F8FAFC — רקע סקשן לקוחות/חוו"ד (Figma neutral/50) */
  --color-text:       var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-500);
  --color-border:     var(--color-neutral-200);
  --color-link:       var(--color-primary);
  --color-success:    #16A34A;
  --color-error:      #DC2626;
  --color-warning:    #D97706;

  /* כינויי הסקשנים (מצביעים על הסקאלה הנכונה) */
  --color-hero-navy: var(--color-primary-900);              /* #042838 */
  --color-gold:      var(--color-secondary-500);            /* #C2AD89 */
  --color-teal:      var(--color-primary-800);              /* #124E67 */
  --color-on-action: var(--color-surface-on-action);        /* #F2F8FD */

  /* ============ טיפוגרפיה / Typography (responsive) — Desktop ============ */

  --font-display: "Fb Hachaluzim", "Heebo", "Assistant", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Google Sans", "Heebo", "Assistant", "Helvetica Neue", Arial, sans-serif;
  --font-sans:    var(--font-body);
  --font-heading: var(--font-display);
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* משקלים / Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* --- כותרות / Headings — DESKTOP (ברירת מחדל). מובייל ב-@media ≤768 --- */
  --h1-size: 74px; --h1-lh: 62px; --h1-tracking: -1px;
  --h2-size: 54px; --h2-lh: 50px; --h2-tracking: -1px;
  --h3-size: 43px; --h3-lh: 43px; --h3-tracking: -1px;
  --h4-size: 36px; --h4-lh: 36px; --h4-tracking: -1px;
  --h5-size: 28px; --h5-lh: 32px; --h5-tracking: -1px;
  --h6-size: 22px; --h6-lh: 25px; --h6-tracking: -1px;

  /* --- פסקאות / Paragraphs — Figma p-XL/L/M/S (Desktop). מובייל ב-@media --- */
  --p-xl: 22px; --p-xl-lh: 32px;
  --p-l:  18px; --p-l-lh:  28px;
  --p-m:  14px; --p-m-lh:  22px;
  --p-s:  10px; --p-s-lh:  18px;
  /* תאימות לאחור (שמות בשימוש) — גוף האתר = 16 (= type/p-L style) */
  --p-lg: var(--p-l);              /* 18 / mobile 16 */
  --p-md: 16px; --p-md-lh: 24px;   /* גוף ברירת מחדל (Google Sans p-L 16/24) */
  --p-sm: var(--p-m);              /* 14 / mobile 12 */
  --p-xs: var(--p-s);              /* 10 */

  /* גובה שורה גנרי */
  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  /* סקאלת גדלים גנרית (כפתורים/תגיות/מטא) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  60px;

  /* ============ מרווחים / Spacing (scales/spacing) — Desktop ============ */
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-s:   16px;
  --space-m:   24px;
  --space-l:   30px;
  --space-xl:  60px;
  --space-2xl: 80px;
  --space-3xl: 120px;
  /* תאימות לאחור (שמות גנריים בשימוש) */
  --space-sm:  var(--space-s);    /* 16 */
  --space-md:  var(--space-m);    /* 24 */
  --space-lg:  var(--space-l);    /* 30 */
  --space-4xl: var(--space-3xl);  /* 120 */
  --space-5xl: var(--scale-160);  /* 160 */

  /* ============ ריפוד רכיבים / Padding (scales/padding) — Desktop ============ */
  --pad-3xs: 8px;
  --pad-2xs: 12px;
  --pad-xs:  16px;
  --pad-s:   20px;
  --pad-m:   24px;
  --pad-l:   32px;
  --pad-xl:  40px;
  --pad-2xl: 60px;
  --pad-3xl: 80px;

  /* ============ ריפוד סקשנים / Section padding — Desktop ============ */
  --section-pad-wide:   160px;  /* 1440 − 2×160 = 1120 = רוחב התוכן */
  --section-pad-narrow: 60px;

  /* ============ פריסה / Layout ============ */
  --container-max:    1184px;   /* תוכן אפקטיבי 1120 (1184 − 2×32 gutter) = רוחב התוכן ב-Figma */
  --container-wide:   1440px;   /* breakpoint דסקטופ ב-Figma */
  --container-narrow: 800px;
  --breakpoint-mobile: 393px;   /* breakpoint מובייל ב-Figma (reference) */
  --gutter:           32px;             /* inset תוכן גלובלי (Figma מובייל: x32) */
  --header-height:    72px;

  /* ============ עיגול פינות / Radius (scales/radius) — Desktop ============ */
  --radius-2xs:   8px;
  --radius-xs:    12px;
  --radius-s:     16px;
  --radius-m:     24px;
  --radius-l:     30px;
  --radius-round: 240px;
  --radius-full:  9999px;
  /* תאימות לאחור */
  --radius-sm: var(--radius-2xs);  /* 8 */
  --radius-md: var(--radius-xs);   /* 12 */
  --radius-lg: var(--radius-s);    /* 16 */

  /* ============ צללים / Shadows ============
     ⚠️ ל-Figma אין effect styles — ערכי ברירת-מחדל מקומיים בלבד. */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);

  /* ============ מעברים / Transitions ============ */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ============ שכבות / z-index ============ */
  --z-header:  100;
  --z-overlay: 900;
  --z-modal:   1000;
}

/* ============================================================
   Mobile overrides (≤ 1023px) — מצב "Mobile" של קולקציית responsive
   מיושר עם breakpoint הפריסה (דסקטופ ≥1024) כדי שהכל יהיה עקבי בכל רוחב.
   ============================================================ */
@media (max-width: 1023px) {
  :root {
    /* כותרות */
    --h1-size: 38px; --h1-lh: 38px; --h1-tracking: -1px;
    --h2-size: 30px; --h2-lh: 34px; --h2-tracking: -1px;
    --h3-size: 28px; --h3-lh: 32px; --h3-tracking: -1px;
    --h4-size: 24px; --h4-lh: 28px; --h4-tracking: 0;
    --h5-size: 20px; --h5-lh: 24px; --h5-tracking: 0;
    --h6-size: 18px; --h6-lh: 24px; --h6-tracking: 0;

    /* פסקאות */
    --p-xl: 18px; --p-xl-lh: 30px;
    --p-l:  16px; --p-l-lh:  22px;
    --p-m:  12px; --p-m-lh:  20px;
    --p-s:  10px; --p-s-lh:  16px;

    /* מרווחים */
    --space-2xs: 4px;
    --space-xs:  8px;
    --space-s:   12px;
    --space-m:   16px;
    --space-l:   20px;
    --space-xl:  30px;
    --space-2xl: 40px;
    --space-3xl: 60px;

    /* ריפוד רכיבים */
    --pad-3xs: 6px;
    --pad-2xs: 8px;
    --pad-xs:  12px;
    --pad-s:   12px;
    --pad-m:   16px;
    --pad-l:   20px;
    --pad-xl:  24px;
    --pad-2xl: 32px;
    --pad-3xl: 42px;

    /* ריפוד סקשנים */
    --section-pad-wide:   16px;
    --section-pad-narrow: 8px;

    /* עיגול פינות */
    --radius-2xs: 4px;
    --radius-xs:  8px;
    --radius-s:   12px;
    --radius-m:   20px;
    --radius-l:   24px;
  }
}