/* ============================================================
   NEO — Design Tokens
   ------------------------------------------------------------
   כיוון: "הפלטה". לוח שרטוט בהיר, עם פלטה שחורה בהיירו ובפוטר.

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

:root {

  /* ==========================================================
     1. צבע
     ----------------------------------------------------------
     חמשת גווני הזהב נדגמו מקובץ הלוגו עצמו, לא נבחרו מהעין.
     ========================================================== */

  /* הכחול, מכהה לבהיר.
     שמות המשתנים נשארו gold-* בכוונה: כל האתר כבר מצביע
     עליהם, ושינוי שם היה מפזר עשרות עריכות בלי להוסיף כלום.
     הערך הוא מה שמשנה, לא השם. */
  --gold-100: #1652CC;   /* כחול עמוק */
  --gold-200: #2D7BFF;   /* הכחול הראשי, ל-CTA ולאייקונים */
  --gold-300: #4A90FF;   /* קווים וגבולות */
  --gold-400: #5FA5FF;   /* טקסט מודגש על רקע כהה */
  --gold-500: #8FC4FF;   /* בהיר */
  --gold-600: #46D6FF;   /* ציאן, לניצוץ בלבד */

  /* שני מפלסי הרקע. שניהם נייבי, ולכן ההבחנה ביניהם היא
     בעומק ולא בבהיר מול כהה — אבל היא חייבת להיות מורגשת.
     כשהשניים כמעט זהים, הסירוגין בין המקטעים לא עושה כלום
     והעמוד נקרא כמשטח אחד ארוך. הפער כאן הוא מה שנותן
     לגלילה קצב. */
  --sheet:        #0C1728;
  --sheet-raised: #122036;
  --sheet-sunk:   #081120;

  --plate:        #03070E;
  --plate-raised: #070E1A;

  /* טקסט. שני ההקשרים כהים, ולכן שניהם נושאים דיו בהיר. */
  --ink:    #E6EEF9;
  --ink-2:  #A3B6D2;
  --ink-3:  #7A90AD;

  --bone:   #F2F7FF;
  --bone-2: #A3B6D2;
  --bone-3: #7A90AD;

  /* קווי שיער */
  --line-ink:   rgba(230, 238, 249, .13);
  --line-ink-2: rgba(230, 238, 249, .07);
  --line-gold:  rgba(95, 165, 255, .34);
  --line-bone:  rgba(242, 247, 255, .14);
  --line-gold-plate: rgba(95, 165, 255, .32);

  --grid-ink:  rgba(230, 238, 249, .045);
  --grid-bone: rgba(242, 247, 255, .045);

  /* מצבים. נדרשים לטפסים, ולא נגזרים מהמותג אלא מהמוסכמה */
  --ok:   #2E6B4F;
  --warn: #8A6516;
  --err:  #98301F;

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

     Frank Ruhl Libre נבחר כי ניגודיות המשיכות שלו קרובה ל-2.0,
     בדיוק כמו שנמדד בוורדמארק NEO. Playfair נפסל, הניגודיות
     שלו כפולה מזה והוא יוצא מלודרמטי ליד הלוגו.
     ========================================================== */

  --font-display: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --font-body:    "Assistant", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* סולם מודולרי 1.25, מתאים לעריכה ולא צועק */
  --t-2xs:  0.6875rem;   /* 11 — תוויות מונו זעירות */
  --t-xs:   0.75rem;     /* 12 — הערות שוליים */
  --t-sm:   0.875rem;    /* 14 */
  --t-base: 1.0625rem;   /* 17 — גוף */
  --t-md:   1.1875rem;   /* 19 — פסקת פתיחה */
  --t-lg:   1.5rem;      /* 24 */
  --t-xl:   2rem;        /* 32 */
  --t-2xl:  clamp(2.1rem, 4.2vw, 3.1rem);
  --t-3xl:  clamp(2.6rem, 6.4vw, 4.8rem);
  --t-4xl:  clamp(3.1rem, 8.6vw, 6.6rem);   /* היירו בלבד */

  --w-light:  300;
  --w-reg:    400;
  --w-med:    500;
  --w-bold:   700;

  --lh-tight:   1.06;   /* כותרות ענק */
  --lh-display: 1.14;
  --lh-snug:    1.35;
  --lh-body:    1.68;
  --lh-mono:    1.45;

  --ls-display: -0.024em;
  --ls-tight:   -0.012em;
  --ls-normal:  0;
  --ls-label:   0.14em;   /* תוויות מונו באותיות גדולות */

  /* ==========================================================
     3. מרווחים
     ----------------------------------------------------------
     נגזרים מהלוגו עצמו. במדידה: הרווח מהכתר למילה הוא 45px,
     מהמילה לטאגליין 13px, והיחס 3.46. שני הערכים האלה הם
     sp-2 ו-sp-4, והסולם מטפס ביניהם ומעבר להם באותו יחס
     שורש (כ-1.86), כך שהריתמוס של האתר הוא הריתמוס של הלוגו.
     ========================================================== */

  --sp-0:  0;
  --sp-1:  7px;
  --sp-2:  13px;    /* הרווח הצמוד בלוגו */
  --sp-3:  24px;
  --sp-4:  45px;    /* הרווח הפתוח בלוגו */
  --sp-5:  84px;
  --sp-6:  156px;
  --sp-7:  290px;

  /* ריווח מקטעים, מתכווץ במסך קטן */
  --sec-y:   clamp(var(--sp-4), 6.4vw, var(--sp-5));
  --sec-y-s: clamp(var(--sp-3), 6vw, var(--sp-5));

  /* ==========================================================
     4. גריד ומכל
     ----------------------------------------------------------
     חמש עמודות, נגזרות מחמשת קודקודי הכתר.
     ========================================================== */

  --cols: 5;
  --gutter: var(--sp-3);
  --container: 1180px;
  --container-narrow: 760px;   /* לטקסט רץ, שומר על שורה קריאה */
  --pad-x: clamp(18px, 4vw, 44px);

  /* ==========================================================
     5. פינות
     ----------------------------------------------------------
     כלל שנגזר מהכתר: הגוף שלו זוויתי והקצוות שלו עגולים.
     לכן מבנה מקבל פינות חדות, ואקסנט מקבל עיגול מלא.
     אין ערכי ביניים, וזה מה שמונע מהאתר להיראות רך מדי.
     ========================================================== */

  --r-none: 0;
  --r-hair: 2px;
  --r-pill: 999px;

  /* ==========================================================
     6. גבהים
     ----------------------------------------------------------
     גיליון שרטוט לא מרחף. אין צללים כמעט, וההפרדה נעשית
     בקווי שיער. היוצא היחיד הוא זוהר הזהב על הכפתור הראשי,
     שם הוא משרת מטרה: למשוך את העין לפעולה.
     ========================================================== */

  --shadow-none: none;
  --shadow-plate: 0 1px 0 rgba(242,247,255,.05) inset;
  --glow-gold: 0 8px 30px -10px rgba(45,123,255,.6);
  --glow-gold-strong: 0 14px 42px -10px rgba(45,123,255,.85);

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

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io:  cubic-bezier(.76, 0, .24, 1);

  --dur-tap:   120ms;
  --dur-hover: 220ms;
  --dur-enter: 520ms;
  --dur-plate: 900ms;   /* המעבר בין הפלטה לנייר */

  /* ==========================================================
     8. שכבות
     ========================================================== */

  --z-grid: 0;
  --z-body: 1;
  --z-dock: 60;
  --z-nav:  80;

  /* גובה התפריט. תמונת ההיירו מחסירה אותו מגובה המסך. */
  --nav-h: 90px;
  --z-skip: 200;
}

/* ============================================================
   הקשרי צבע
   ------------------------------------------------------------
   במקום לכתוב צבעים בכל רכיב, רכיב יורש מההקשר שהוא יושב בו.
   אותו כפתור נראה נכון גם על הנייר וגם על הפלטה, בלי גרסה שנייה.
   ============================================================ */

.on-sheet {
  --bg:        var(--sheet);
  --bg-raised: var(--sheet-raised);
  --fg:        var(--ink);
  --fg-2:      var(--ink-2);
  --fg-3:      var(--ink-3);
  --hair:      var(--line-ink);
  --hair-soft: var(--line-ink-2);
  --hair-gold: var(--line-gold);
  --gold-text: var(--gold-400);   /* 7.4:1 מול הנייבי המורם */
  --gold-mark: var(--gold-300);
  --grid:      var(--grid-ink);
}

.on-plate {
  --bg:        var(--plate);
  --bg-raised: var(--plate-raised);
  --fg:        var(--bone);
  --fg-2:      var(--bone-2);
  --fg-3:      var(--bone-3);
  --hair:      var(--line-bone);
  --hair-soft: rgba(242,247,255,.08);
  --hair-gold: var(--line-gold-plate);
  --gold-text: var(--gold-400);   /* 9.6:1 מול הפלטה */
  --gold-mark: var(--gold-300);
  --grid:      var(--grid-bone);
}

/* ============================================================
   נגישות והעדפות מערכת
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-tap: 1ms; --dur-hover: 1ms; --dur-enter: 1ms; --dur-plate: 1ms;
  }
}

@media (prefers-contrast: more) {
  .on-sheet { --fg-2: #D3E1F4; --fg-3: #AEC0DA; --hair: rgba(230,238,249,.3); }
  .on-plate { --fg-2: #D3E1F4; --fg-3: #AEC0DA; --hair: rgba(242,247,255,.32); }
}