/* ============================================================
   RONEN — Design Tokens (Global) / טוקנים גלובליים
   ------------------------------------------------------------
   מקור האמת היחיד לכל הגלובליות של האתר.
   כל הערכים נשאבו 1:1 ממשתני Figma — קובץ `9ZUTKLNjo19H2EHHpSlz6g`:
     · Desktop  ← frame `2001:4284`  ("1. בית", 1440)
     · Mobile   ← frame `2001:4528`  ("1. home", 393)

   ב-CSS: Desktop = ברירת מחדל ב-:root · Mobile = override ב-@media (≤1023px).

   ⚠️ Figma מחזיר רק משתנים שבשימוש בפועל ב-frame הנתון. ערכים שלא הופיעו
   בשום frame מסומנים כאן במפורש ב-INFERRED — לאמת מול Figma לפני הסתמכות.
   ============================================================ */

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

   Fb Coherenti Sans — משקל Regular (400) בלבד.
   ⚠️ קריטי: זה גופן תצוגה כבד — 400 הוא "המראה המודגש".
   אין להשתמש ב-700/800/900 בשום מקום; זה מפעיל faux-bold ונראה שבור.
   ------------------------------------------------------------ */

@font-face {
  font-family: "Fb Coherenti Sans";
  src: url("../fonts/coherenti-regular.woff") format("woff"),
       url("../fonts/coherenti-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ============================================================
     שכבה 1 — PRIMITIVES
     ============================================================ */

  /* ---- Primary — סגול המותג ---- */
  --color-primary-200: #BCB1FF;   /* color/primary/200 · = stroke-action */
  --color-primary-500: #6E44FF;   /* mapping/action — הסגול הראשי */

  /* ---- Neutral ---- */
  --color-neutral-50:  #F8FAFC;   /* color/neutral/50 · Color action/neutral/50 */
  --color-neutral-100: #F1F5F9;   /* color/neutral/100 */
  --color-neutral-200: #D5D9E2;   /* mapping/stroke-disabled (Desktop) */
  --color-neutral-300: #B1BBC8;   /* colors/brand color/neutral/300 */
  --color-neutral-600: #526077;   /* mapping/text - disabled */
  --color-neutral-950: #23272E;   /* colors/brand color/neutral/950 — טקסט ראשי */

  /* ---- מילויי סקשן / Section fills ---- */
  --color-fill-primary-50: #F4F2FF;  /* mapping/section-fill_primary-50 */
  --color-fill-neutral-50: #F6F7F9;  /* mapping/section-fill_neutral-50 */

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

  /* ============================================================
     שכבה 2 — SEMANTIC · ערכי Desktop
     ============================================================ */

  --color-action:          var(--color-primary-500);   /* #6E44FF */
  --color-on-action:       var(--color-neutral-50);    /* mapping/on-action #F8FAFC */
  --color-stroke-action:   var(--color-primary-200);   /* #BCB1FF */
  --color-stroke-disabled: var(--color-neutral-200);   /* #D5D9E2 · מובייל #B1BBC8 */
  --color-text-disabled:   var(--color-neutral-600);   /* #526077 */

  --color-bg:         var(--color-white);
  --color-bg-alt:     var(--color-fill-neutral-50);
  --color-bg-brand:   var(--color-fill-primary-50);
  --color-text:       var(--color-neutral-950);
  --color-text-muted: var(--color-neutral-600);
  --color-border:     var(--color-stroke-disabled);
  --color-link:       var(--color-action);

  /* INFERRED — אין ב-Figma משתני מצב. ברירות-מחדל מקומיות. */
  --color-success: #16A34A;
  --color-error:   #DC2626;
  --color-warning: #D97706;

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

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

  /* משקל יחיד — ראה אזהרת הגופן למעלה */
  --fw-regular: 400;

  /* --- כותרות / Headings — DESKTOP --- */
  --h1-size: 112px; --h1-lh: 100px; --h1-tracking: -4px;
  --h2-size:  56px; --h2-lh:  56px; --h2-tracking: -4px;
  --h3-size:  42px; --h3-lh:  42px; --h3-tracking: -3px;
  --h4-size:  32px; --h4-lh:  32px; --h4-tracking: -2px;
  --h5-size:  28px; --h5-lh:  28px; --h5-tracking: -1.5px;  /* INFERRED — H5 לא בשימוש באף frame שנקרא */
  --h6-size:  24px; --h6-lh:  24px; --h6-tracking: -1px;

  /* --- פסקאות / Paragraphs — DESKTOP --- */
  --p-xl: 24px; --p-xl-lh: 32px; --p-xl-gap: 24px;
  --p-l:  18px; --p-l-lh:  28px; --p-l-gap:  20px;
  --p-m:  16px; --p-m-lh:  22px; --p-m-gap:  20px;
  --p-s:  12px; --p-s-lh:  18px; --p-s-gap:  16px;
  --tracking-body: 0;

  /* גוף האתר = p-L */
  --body-size: var(--p-l);
  --body-lh:   var(--p-l-lh);

  /* ============ מרווחים / Spacing — Desktop ============ */
  --space-2xs:  8px;
  --space-xs:  12px;
  --space-s:   16px;
  --space-m:   24px;
  --space-l:   32px;
  --space-xl:  60px;
  --space-2xl: 80px;    /* INFERRED — מיושר ל-padding/3XL */
  --space-3xl: 120px;   /* INFERRED */

  /* ============ ריפוד רכיבים / Padding — Desktop ============ */
  --pad-3xs:  4px;
  --pad-2xs:  8px;
  --pad-s:   16px;
  --pad-m:   20px;   /* INFERRED — padding/M לא הופיע ב-frame הדסקטופ */
  --pad-l:   24px;
  --pad-xl:  32px;
  --pad-2xl: 60px;
  --pad-3xl: 80px;

  /* ============ עיגול פינות / Radius — Desktop ============ */
  --radius-2xs:    8px;
  --radius-xs:    12px;
  --radius-s:     16px;   /* INFERRED — radius/S לא הופיע ב-frame הדסקטופ */
  --radius-m:     24px;
  --radius-round: 240px;
  --radius-full:  9999px;

  /* ============ רמפת מספרים / Scales ============ */
  --scale-100: 4px;   /* scales/all scales/100 · מובייל 2 */
  --scale-200: 6px;   /* scales/all scales/200 (6) */

  /* ============ פריסה / Layout ============ */
  --container-wide:    1440px;  /* breakpoint דסקטופ ב-Figma */
  --container-max:     1384px;  /* = 1320 תוכן + 2×32 gutter. 1320 = רוחב הנאבבר ורשת העבודות ב-Figma */
  --container-narrow:   784px;  /* = 720 תוכן, כרוחב הטופס בפרודקשן */
  --breakpoint-mobile:  393px;  /* breakpoint מובייל ב-Figma */
  --gutter:              32px;
  --header-height:       72px;  /* INFERRED — לאמת מול frame ההאדר */

  /* ============ צללים / Shadows ============
     INFERRED — ל-Figma אין effect styles. ברירות-מחדל מקומיות. */
  --shadow-sm: 0 1px 2px rgba(35, 39, 46, .06);
  --shadow-md: 0 4px 12px rgba(35, 39, 46, .08);
  --shadow-lg: 0 12px 32px rgba(35, 39, 46, .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" של Figma
   מיושר עם breakpoint הפריסה כדי שהכל יהיה עקבי בכל רוחב.
   ============================================================ */
@media (max-width: 1023px) {
  :root {

    /* כותרות — כולן ללא tracking במובייל (Figma: tracking 0) */
    --h1-size: 42px; --h1-lh: 42px; --h1-tracking: 0;
    --h2-size: 36px; --h2-lh: 36px; --h2-tracking: 0;
    --h3-size: 32px; --h3-lh: 32px; --h3-tracking: 0;
    --h4-size: 28px; --h4-lh: 28px; --h4-tracking: 0;
    --h5-size: 24px; --h5-lh: 24px; --h5-tracking: 0;  /* INFERRED */
    --h6-size: 20px; --h6-lh: 20px; --h6-tracking: 0;

    /* פסקאות */
    --p-xl: 20px; --p-xl-lh: 28px; --p-xl-gap: 24px;  /* INFERRED — p-XL לא בשימוש במובייל הבית */
    --p-l:  16px; --p-l-lh:  22px; --p-l-gap:  20px;
    --p-m:  14px; --p-m-lh:  20px; --p-m-gap:  20px;
    --p-s:  10px; --p-s-lh:  16px; --p-s-gap:  16px;

    /* מרווחים */
    --space-2xs:  4px;
    --space-xs:   6px;
    --space-s:    8px;
    --space-m:   16px;
    --space-l:   24px;
    --space-xl:  32px;
    --space-2xl: 48px;   /* INFERRED — מיושר ל-padding/3XL במובייל */
    --space-3xl: 64px;   /* INFERRED */

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

    /* עיגול פינות */
    --radius-2xs:  4px;   /* INFERRED */
    --radius-xs:   8px;
    --radius-s:   12px;
    --radius-m:   16px;   /* INFERRED — radius/M לא הופיע ב-frame המובייל */

    /* גבול מושבת שונה במובייל */
    --color-stroke-disabled: var(--color-neutral-300);  /* #B1BBC8 */

    /* רמפת מספרים */
    --scale-100: 2px;

    /* פריסה */
    --gutter: 16px;   /* INFERRED — לאמת מול inset המובייל ב-frame */
  }
}