/* ============================================================================
   Faber Flow · טוקני מותג
   מקור אמת יחיד לצבע, לגופן, לרדיוס ולתנועה. כל עמוד באתר טוען את הקובץ הזה
   ואז דורס רק מה שייחודי לו. לא להעתיק ערכי צבע ידנית לתוך עמוד.

   **חריג אחד, מכוון**: ארבעת המסמכים המשפטיים, `privacy.html` ו-`accessibility.html`
   בעברית ובאנגלית, מחזיקים עותק מלא של הטוקנים בתוך ה-`<style>` שלהם ואינם טוענים
   את הקובץ הזה. הסיבה אמיתית: מסמך משפטי נשלח בדואר, נשמר לדיסק ונפתח מנותק מעץ
   האתר, ובמצב כזה `<link>` יחסי נשבר והעמוד מגיע לעורך הדין בלי עיצוב. ארבעה
   עמודים מתוך שלושה עשר, וכל אחד מהם מתעד את החריגה בהערה משלו.
   **המחיר**: שינוי בפלטה מחייב עדכון בחמישה מקומות. לפני שינוי כזה, לרוץ
   `grep -rl "\-\-ff-1:" ../` ולעדכן את כל מה שחוזר.

   מפת הקובץ
   ---------
   :root                     הסולם הגולמי, הצבעים הסמנטיים, הדיו, הרקעים, הגופנים
   html[data-theme="light"]  המצב הבהיר. הסולם לא משתנה, הסמנטיקה כן
   html[lang="en"]           החלפת מחסנית הגופנים לאתר האנגלי
   .ff-grad-text             טקסט צבוע בסולם המותג
   .ff-icon-grad             מילוי גרדיאנט לאייקונים, דורש את ה-defs שבתחתית הקובץ
   prefers-reduced-motion    ביטול כל תנועה מונפשת

   שני מצבים, לא שלושה. `data-theme` על `<html>` הוא מקור האמת היחיד, ו-`theme.js`
   כותב אותו. בטעינה ראשונה, לפני שהמשתמש בחר, הערך נגזר מ-prefers-color-scheme.
   ============================================================================ */

:root {
  color-scheme: dark;   /* פסי גלילה, בוררי תאריך ותיבות סימון של המערכת */
  /* --- הסולם. שבע עצירות, סגול אל אקווה. זה הסולם שממנו נגזר הסימן --- */
  --ff-1: #795DFF;   /* סגול      */
  --ff-2: #547AFF;   /* אינדיגו   */
  --ff-3: #008FFF;   /* תכלת עז   */
  --ff-4: #00A8E3;
  --ff-5: #00BED4;
  --ff-6: #22D3C5;   /* טורקיז, צבע המותג הראשי */
  --ff-7: #00FFDE;   /* אקווה     */

  /* --- רקעים --- */
  --bg:      #06090C;
  --bg-2:    #0B1116;
  --bg-3:    #10171D;
  --bg-inv:  #FFFFFF;

  /* --- דיו --- */
  --ink:      #E9EFF4;   /* 17.22:1 על --bg  */
  --ink-soft: #C8D4DE;   /* 13.24:1          */
  --ink-dim:  #ABBBC8;   /* 10.14:1          */
  --ink-deco: #7C8EA0;   /*  5.44:1, טקסט גדול בלבד */
  --ink-mark: #4B5A68;   /* מתחת לסף. הערות מידה דקורטיביות בשרטוט בלבד */
  --ink-dark: #141416;   /* דיו על רקע בהיר  */

  /* --- צבעים סמנטיים.
     כל טוקן שנושא טקסט קורא עומד ב-4.5:1 מול --bg וגם מול --bg-2.
     הטוקנים המסומנים "דקורטיבי" אינם עומדים בסף ואסור להעמיד עליהם טקסט.

     **הכחול מפוצל לשני תפקידים, וזה מכוון.** הכחול הכהה של הסימן, ‎#1A3FF6,
     אינו קריא כטקסט על רקע כהה: הוא נותן 2.93:1 מול ‎#06090C, הרחק מתחת לסף.
     נמדד שאף אחד מכחולי הלוגו אינו עובר את הסף על רקע כהה (הגבוה ביותר,
     ‎#0A72F0, נותן 4.45). לכן:
       --acc-deep  הכחול של הלוגו. **מילוי בלבד** — כפתורים, מסגרות, משטחים.
       --acc       גוון בהיר מאותה משפחה שנושא טקסט, ומתהפך במצב הבהיר.
       --on-acc    לבן, הטקסט שיושב בתוך מילוי --acc-deep. 6.81:1.
     כך הכפתורים כחולים כהים בשני המצבים, והטקסט נשאר קריא. --- */
  --acc:        #6FA0FF;   /*  7.74:1 על --bg · 7.37:1 על --bg-2 · הצבע הראשי לטקסט, קישורים ואייקונים */
  --acc-lit:    #8DBBFF;   /* 10.16:1 על --bg · 9.66:1 על --bg-2 · הדגשה בהירה */
  --acc-glow:   #7FB0FF;   /*  9.08:1 על --bg · 8.64:1 על --bg-2 · מספרים ונקודות סיגנל */
  --acc-deep:   #1A3FF6;       /* כחול הלוגו. **מילוי** של כפתורים ומשטחים.
                                  לא לשים עליו טקסט חוץ מ---on-acc */
  --acc-2:      var(--ff-1);   /*  4.58:1 על --bg, 4.36:1 על --bg-2 · דקורטיבי בלבד */
  --acc-2-lit:  #A08CFF;       /*  7.31:1 · הסגול שמותר להעמיד עליו טקסט   */
  --acc-3:      var(--ff-3);   /*  6.06:1 · תכלת, טקסט גדול ואייקונים      */
  --acc-3-lit:  #6FC2FF;       /* 10.30:1 · התכלת לטקסט רגיל               */
  --on-acc:     #FFFFFF;       /*  6.81:1 בתוך כפתור --acc-deep */

  --line:      rgba(255,255,255,.07);
  --line-2:    rgba(255,255,255,.12);
  /* שכבות האווירה בעמוד הבית. מטוקנות כדי שהמצב הבהיר יוכל להחליף אותן,
     במקום rgba לבן קשיח שנעלם על רקע לבן */
  --veil:      rgba(233,239,244,.09);   /* קווי הרשת, ראשי                */
  --veil-2:    rgba(233,239,244,.045);  /* קווי הרשת, משני                */
  --glow-1:    rgba(26,63,246,.20);    /* הילה טורקיז                    */
  --glow-2:    rgba(121,93,255,.16);    /* הילה סגולה                     */
  --noise-op:  .022;                    /* עוצמת שכבת הרעש                */
  --nav-bg:    rgba(6,9,12,.82);        /* רקע שורת הניווט מאחורי הטשטוש  */
  --card:      rgba(255,255,255,.025);  /* משטח כרטיס                     */

  /* --- גרדיאנטים מוכנים --- */
  --grad-brand:  linear-gradient(135deg, var(--ff-1) 0%, var(--ff-2) 32%,
                                 var(--ff-3) 62%, var(--ff-7) 100%);
  --grad-line:   linear-gradient(90deg, var(--ff-1), var(--ff-3), var(--ff-7));
  --grad-text:   linear-gradient(90deg, var(--acc-lit) 0%, var(--acc) 22%,
                                 var(--acc-2-lit) 50%, var(--acc) 78%,
                                 var(--acc-lit) 100%);

  /* --- גופנים.
     עברית: Heebo לכותרות, Assistant לגוף. לטינית: Poppins.
     הכיתוב שבלוגו נקבע ב-Poppins SemiBold ו-Rubik SemiBold והוא אמנות סגורה,
     מתואר לנתיבים. אין להקליד אותו בגופן חי --- */
  --font-h: 'Heebo', 'Poppins', system-ui, sans-serif;
  --font-b: 'Heebo', system-ui, sans-serif;
  --font-display: 'Heebo', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* --- צורה ותנועה --- */
  --r: 4px;
  --r-lg: 12px;
  --r-tile: 22.5%;          /* רדיוס אריח האייקון, יחסי לצלע */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: .5s;
}

/* ============================================================================
   המצב הבהיר
   ----------
   הסולם `--ff-1..7` **לא משתנה**. הוא הזהות, והוא נשאר זהה בשני המצבים: הסימן,
   הגרדיאנטים ומילוי הכפתורים ממשיכים להשתמש בו כמו שהוא. מה שכן משתנה הוא
   הסמנטיקה, כלומר איזה צבע מותר לשאת טקסט.

   על רקע לבן הגוונים הבהירים קורסים: ‎#6FA0FF נותן 2.36:1. לכן במצב הבהיר
   `--acc` ומשפחתו מקבלים את הכחול העמוק של הסימן. שים לב שהיחס בין `--acc`
   ל-`--acc-lit` מתהפך: `-lit` אינו "בהיר יותר", הוא **בעל הניגודיות הגבוהה
   יותר**. ככה שני המצבים משתמשים באותו טוקן לאותו תפקיד.

   כל היחסים נמדדו מול ‎#FFFFFF ומול ‎#F4F7FA, ושניהם עוברים.
   ============================================================================ */
html[data-theme="light"] {
  color-scheme: light;

  --bg:       #FFFFFF;
  --bg-2:     #F4F7FA;
  --bg-3:     #EAEFF5;
  --bg-inv:   #06090C;

  --ink:      #141416;   /* 18.40:1 */
  --ink-soft: #2A3038;   /* 13.31:1 */
  --ink-dim:  #3A424B;   /* 10.19:1 */
  --ink-deco: #55606B;   /*  6.42:1 · עובר גם לטקסט רגיל */
  --ink-mark: #7A8590;   /*  3.76:1 · הערות מידה בשרטוט בלבד */
  --ink-dark: #FFFFFF;   /* הדיו שיושב על משטח הפוך */

  --acc:       #1A3FF6;  /*  6.81:1 על לבן · 6.33:1 על --bg-2 · קישורים וטקסט מודגש */
  --acc-lit:   #173FC4;  /*  8.25:1 על לבן · 7.68:1 על --bg-2 · ההדגשה החזקה */
  --acc-glow:  #1A3FF6;  /*  6.81:1 על לבן · 6.33:1 על --bg-2 · אין זוהר על לבן, נופל לצבע מלא */
  --acc-deep:  #1A3FF6; /* כחול הלוגו. המילוי, לא הטקסט */
  --acc-2:     #6B4EE6;  /*  5.44:1 · במצב הבהיר הסגול **כן** נושא טקסט */
  --acc-2-lit: #5436C9;  /*  7.64:1 */
  --acc-3:     #0063C1;  /*  5.91:1 */
  --acc-3-lit: #1668C4;  /*  5.51:1 */
  --on-acc:    #FFFFFF;  /*  6.81:1 · הכפתור נשאר ‎#1A3FF6 בשני המצבים */

  --line:     rgba(9,14,20,.10);
  --line-2:   rgba(9,14,20,.17);
  --veil:     rgba(9,14,20,.07);
  --veil-2:   rgba(9,14,20,.035);
  --glow-1:   rgba(26,63,246,.10);
  --glow-2:   rgba(107,78,230,.10);
  --noise-op: .014;
  --nav-bg:   rgba(255,255,255,.86);
  --card:     rgba(9,14,20,.022);

  --grad-text: linear-gradient(90deg, var(--acc-lit) 0%, var(--acc) 22%,
                               var(--acc-2-lit) 50%, var(--acc) 78%,
                               var(--acc-lit) 100%);
}


/* ============================================================================
   סולם הפריסה · מקור אמת יחיד · נוסף 2026-08-30
   ----------------------------------------------------------------------------
   ⚠ למה זה כאן. עד היום כל סקציה באתר קידדה לעצמה ריפוד, גודל כותרת ורוחב
   מכל, ולכן ארבע סקציות ישבו על ריפוד 0, שלוש על 48, אחת על 76, והכותרות
   רצו 27 / 42 / 46 / 48 פיקסל. **הגדלים בני 27 היו ברירת המחדל של הדפדפן,
   כלומר לא עוצבו כלל.** רוחב המכל קפץ 1012 ↔ 1180 בין סקציה לסקציה.
   זאת הייתה הסיבה המדידה לתחושה של אורן שהאתר לא אחיד.

   ⚠ הכלל מעכשיו: אף עמוד לא מצהיר ריפוד סקציה, גודל כותרת או רוחב מכל
   משלו. הכל יורש מכאן. סקציה שצריכה חריגה מקבלת מחלקת מודיפייר, לא ערך קשיח.

   ⚠ רוחב אחד לכל הסקציות. מידת הקריאה מושגת דרך --measure על גוש הטקסט
   עצמו, ולא דרך כיווץ המכל. כך השוליים של העמוד לא זזים בגלילה.
   ============================================================================ */
:root {
  --max:      1180px;                     /* רוחב המכל. אחד, לכל הסקציות */
  --max-n:    1012px;                     /* נשמר לתאימות. אין להשתמש בו בסקציה חדשה */
  --measure:  68ch;                       /* מידת קריאה לגוש טקסט רץ */
  --measure-n:54ch;                       /* מידה צרה, לשורות משנה */

  --sp-sec:   clamp(52px, 6vw, 84px);     /* הריווח האנכי של כל סקציה */
  --sp-hero:  clamp(96px, 11vw, 146px);   /* ה-hero לבדו: פינוי לסרגל הניווט */
  --sp-block: clamp(26px, 3.4vw, 40px);   /* בין כותרת סקציה לגוף שלה */
  --sp-item:  clamp(12px, 1.6vw, 20px);   /* בין פריטים ברשת */

  --fs-h2:    clamp(27px, 4.4vw, 44px);   /* כותרת סקציה. אחת, לכל הסקציות */
  --fs-h3:    clamp(18px, 2.2vw, 22px);
  --fs-lede:  clamp(17px, 1.9vw, 20px);   /* שורת פתיחה מתחת לכותרת */
}

html[lang="en"] {
  --font-h: 'Heebo', system-ui, sans-serif;
  --font-b: 'Heebo', system-ui, sans-serif;
}

/* טקסט צבוע בסולם. נופל בחן לצבע אחיד היכן ש-background-clip לא נתמך */
.ff-grad-text {
  background-image: var(--grad-text);
  background-size: 220% 100%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ff-grad-text { background-image: none; color: var(--acc-lit);
                  -webkit-text-fill-color: var(--acc-lit); }
}

/* אייקונים בגרדיאנט. דורש שה-<defs> עם ff-icon-grad יופיע פעם אחת בעמוד:
   <svg width="0" height="0" aria-hidden="true"><defs>
     <linearGradient id="ff-icon-grad" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
       <stop offset="0" stop-color="#795DFF"/>
       <stop offset=".5" stop-color="#008FFF"/>
       <stop offset="1" stop-color="#00FFDE"/>
     </linearGradient></defs></svg> */
.ff-icon-grad { stroke: url(#ff-icon-grad); }
.ff-icon-grad-fill { fill: url(#ff-icon-grad); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur: .001s; }
}
