/*
 * tokens.css — מערכת העיצוב.
 *
 * שפה ויזואלית: **טכני-מדויק**. ההשראה היא מכשיר מדידה, לא כרזה.
 * הכללים שנגזרים מזה:
 *   · קווים דקים ומדויקים במקום צללים כבדים
 *   · רשת עדינה ברקע — רומזת על מדידה בלי להיות רועשת
 *   · מספרים בולטים, בספרות ברוחב אחיד, תמיד LTR
 *   · אקצנט אחד בלבד. צבע נוסף חייב להיות סמנטי, לא דקורטיבי
 *   · הרבה לבן (שחור, כאן) — הרווח הוא חלק מהעיצוב
 *
 * מקור אמת יחיד לצבע, טיפוגרפיה ומרווח. התוסף צורך את הטוקנים
 * האלה ולא מגדיר צבעים משלו.
 */

/* ══════════════════════════════════════════════════════════
   גופן — Heebo, אחסון עצמי
   ══════════════════════════════════════════════════════════
   גופן משתנה: קובץ אחד לכל טווח המשקלים 400–800, ולכן שלוש
   בקשות רשת בלבד לכל המשפחה (56KB סה״כ) במקום עשר.
   רישיון: SIL Open Font License 1.1.
   font-display: swap — הטקסט נראה מיד בגופן מערכת ומתחלף,
   במקום להיעלם עד שהגופן מגיע.
*/

@font-face {
	font-family: 'Heebo';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/heebo-hebrew.woff2') format('woff2');
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
	font-family: 'Heebo';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/heebo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Heebo';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/heebo-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ══════════════════════════════════════════════════════════
   צבע
   ══════════════════════════════════════════════════════════ */

:root {
	/* כהה בלבד. מצב בהיר בוטל: אספלט בהיר הוא בטון, וזו שפה אחרת. */
	color-scheme: dark;

	/* ── משטחים ──
	   הרקע עצמו הוא אספלט מרוקם (ראו --road-*). הערכים כאן הם
	   המשטחים שצפים מעליו: גיליון הקריאה, כרטיסים ופאנלים.

	   שחור מוחלט מעייף את העין בקריאה ארוכה ומשטח את ההיררכיה:
	   כשהרקע כבר בתחתית, אין לאן להוריד את המשטח השקוע. */
	--bg: #15181d;
	--bg-raised: #1b1f26;
	--bg-sunken: #101217;
	--surface: #222630;
	--surface-hi: #2a2f3a;

	/* ── האספלט ──
	   האריח נבנה ב-functions.php ומוזרק כ---road-tile. הוא חוזר
	   ב-background-repeat ולכן שומר על גודל אבן קבוע בכל מסך. */
	--road-base: #15181d;

	/* ⚠ שני הערכים האלה נראים דומים ואסור להחליף ביניהם.

	   --road-tile-size הוא הגודל **האמיתי** של road-tile.png ושל
	   road-mask.png. הוא מזין את mask-size של .at-lane__paint, ולכן
	   חייב להישאר 260px — שינוי שלו מזיז את המסכה ביחס לצבע, והפס
	   הצהוב מאבד את השוליים השחוקים.

	   --road-tile-render הוא הגודל שבו האריח **מצויר** על הרקע.
	   הקטנה שלו מרחיקה את המרקם ומעדנת את הגרעין.

	   ⚠ אין לרדת מתחת ל-~180px: האריח חוזר יותר פעמים למסך והעין
	   מתחילה לתפוס את התפרים כרשת סדירה. אם רוצים להרחיק עוד, צריך
	   לייצר אריח חדש עם יותר אבנים קטנות ב-make-road-tiles.ps1,
	   לא להקטין את הקיים. */
	--road-tile-size: 260px;
	--road-tile-render: 190px;
	/* ⚠ --road-tile ו---road-mask מוזרקים מ-functions.php ככתובות
	   מוחלטות, ולא מוגדרים כאן.

	   הסיבה: כרום מפענח url() שיושב בתוך משתנה CSS יחסית לכתובת
	   **המסמך** ולא לגיליון הסגנונות שבו הוא מוגדר. נתיב יחסי כמו
	   '../road-tile.png' עובד בדף הבית ונשבר בכל עמוד עומק.

	   האריחים עצמם נוצרים על ידי scripts/make-road-tiles.ps1, ושניהם
	   נגזרים מאותה גאומטריה — אחרת הצבע לא יישב על האבנים הנכונות. */
	--paint-white: #efece4;   /* לבן שחוק — מבנה, חלוקה, ניווט */
	--lane-w: 32px;
	--lane-x: max(1.4rem, calc(50% - var(--full-max) / 2 - 3.4rem));
	--lane-clear: 5.2rem;

	/* ── קווים ──
	   שקיפות ולא צבע קבוע: הקו מתאים את עצמו לכל משטח שמתחתיו,
	   וכך נשמר אותו משקל ויזואלי בכל עומק. */
	--hairline: rgba(255, 255, 255, .055);
	--border: rgba(255, 255, 255, .09);
	--border-strong: rgba(255, 255, 255, .17);

	/* ── טקסט ──
	   הועלה יחד עם הרקע. כשהמשטח מתבהר, טקסט משני מאבד ניגודיות:
	   ב-#626d80 על הרקע החדש התקבל יחס 3.43:1, מתחת לסף 4.5:1
	   שנדרש לטקסט קטן. הערכים כאן מחזירים אותו מעל הסף. */
	--text: #eef1f7;
	--text-muted: #a7b0bf;
	--text-faint: #808b9c;

	/* ── טקסט שיושב ישירות על האספלט ──
	   ⚠ מרקם גוזל ניגודיות בצורה שחישוב מול צבע אחיד לא חושף.
	   נמדד על הרינדור בפועל: --text-faint נותן 3.25:1 בממוצע
	   ו-2.30:1 מול האבנים הבהירות — נכשל בסף 4.5:1 לטקסט קטן.
	   הערך כאן עובר 4.82:1 גם מול המקרה הגרוע. */
	--text-on-road: #c3cad6;

	/* ── אקצנט יחיד ──
	   צהוב כביש. משמש לאינטראקציה, לפוקוס ולערך הפעיל — ולשום
	   דבר דקורטיבי.

	   החליף את הציאן שהיה כאן. הנימוק: ברגע שהקנבס הפך לאספלט
	   כהה, צהוב על #33363c נותן יחס ניגודיות של כ-6.5:1 ועובר
	   תקן בנוחות, בעוד ציאן על אספלט נקרא כממשק תוכנה שהודבק
	   על תמונה. הצהוב הוא שפת הכביש עצמה. */
	--accent: #f5cf45;
	--accent-soft: rgba(245, 207, 69, .13);

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

	   ⚠ הכתום הועבר לכתום-אדום. הצהוב תפוס עכשיו על ידי
	   האינטראקציה, ואם צהוב יאמר גם "לחץ כאן" וגם "שים לב",
	   שתי המשמעויות נחלשות. */
	--sig-ok: #4d9dff;
	--sig-ok-soft: rgba(77, 157, 255, .14);
	--sig-warn: #ff6b4a;
	--sig-warn-soft: rgba(255, 107, 74, .13);
	--sig-wear: #e8453c;
	--sig-wear-soft: rgba(232, 69, 60, .13);
	--sig-neutral: #556074;

	/* תאימות לאחור: הקוד הקיים מפנה ל-sig-focus */
	--sig-focus: var(--accent);

	/* ── חומרי ההמחשות ──
	   הכביש נשאר כהה מהרקע כדי שמכולת ההמחשה תיקרא כמשטח שקוע.
	   הגומי חייב להישאר בהיר ממנו, אחרת הצמיג נעלם בתוך הכביש. */
	--tyre: #2b303b;
	--tyre-edge: #4a5364;
	--road: #101217;

	/* ── קו הסקיצה של איורי הרכב ──
	   איור קווי טכני: מתאר בהיר, קווי פנים עמומים ממנו, ומילוי כמעט
	   שקוף. שלוש הרמות הן מה שנותן עומק בלי צל ובלי גרדיאנט —
	   וחשוב מכך, הן שומרות על הסמנים (קאמבר, trail, קפיצים) קריאים
	   מעל האיור במקום להיבלע בו. */
	--sketch-line: #8b95a8;

	/* ══ טיפוגרפיה ══ */
	--font-sans: 'Heebo', 'Segoe UI', 'Arial Hebrew', Arial, sans-serif;
	--font-mono: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

	/* סולם מודולרי ~1.22, נוזלי בין מובייל לדסקטופ */
	--step--2: clamp(.72rem, .70rem + .08vw, .77rem);
	--step--1: clamp(.85rem, .82rem + .14vw, .92rem);
	--step-0: clamp(1rem, .97rem + .18vw, 1.08rem);
	--step-1: clamp(1.19rem, 1.13rem + .32vw, 1.38rem);
	--step-2: clamp(1.42rem, 1.31rem + .55vw, 1.77rem);
	--step-3: clamp(1.69rem, 1.51rem + .90vw, 2.26rem);
	--step-4: clamp(2.01rem, 1.72rem + 1.45vw, 2.90rem);
	--step-5: clamp(2.39rem, 1.93rem + 2.30vw, 3.71rem);

	--leading-tight: 1.15;
	--leading-snug: 1.35;
	--leading-body: 1.72;

	/* כותרות עבריות נושמות טוב יותר עם מרווח אותיות שלילי קל */
	--tracking-tight: -.015em;

	/* ══ מרווח — סולם מבוסס 4px ══ */
	/* ⚠ שלושת אלה נצרכים ב-tools.css של התוסף עם ערכי נפילה,
	   ומעולם לא הוגדרו כאן. --header-h במיוחד: הוא נפל ל-4rem
	   בעוד שהכותרת בפועל היא 6rem, כלומר כל היצמדות דביקה בתוסף
	   סטתה ב-32 פיקסלים והתוכן נכנס מתחת לכותרת. */
	--header-h: 6rem;
	--leading-relaxed: 1.65;
	--space-4xs: .125rem;

	--space-3xs: .25rem;
	--space-2xs: .5rem;
	--space-xs: .75rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2.25rem;
	--space-xl: 3.5rem;
	--space-2xl: 5.5rem;
	--space-3xl: 8rem;

	/* ══ צורה ══ */
	--radius-s: 4px;
	--radius-m: 8px;
	--radius-l: 14px;
	--radius-xl: 20px;
	--radius-pill: 999px;

	/* צל עדין בלבד — בשפה טכנית הקו עושה את העבודה, לא הצל */
	--shadow-md: 0 4px 20px -6px rgba(0, 0, 0, .6);

	/* ══ פריסה ══
	   ⚠ שלושת הערכים הראשונים הם גלובליים ורכיבים רבים תלויים בהם —
	   הירו, הסימולטור, הטבלאות והתפריט. הם נשארים כפי שהיו.
	   הצמצום ל-40rem שייך לעמודת הטקסט של המאמר בלבד, ומיושם דרך
	   --measure על בלוקי טקסט, לא על המכולה. */
	--content-max: 46rem;    /* עמודת התוכן של המאמר */
	--wide-max: 72rem;       /* כלים, טבלאות, רשתות, הירו */
	--full-max: 88rem;       /* כותרת, פוטר, מעטפת */
	--measure: 40rem;        /* רוחב קריאה נוח לטקסט עברי — פסקאות בלבד */

	--sheet-pad: 3.5rem;     /* שוליים פנימיים של גיליון הקריאה */
	--rail-w: 19rem;         /* רצועה שמאלית: תוכן עניינים + מודעה 300px */
	--gutter: 1.5rem;

	/* רוחב שלד המאמר: גיליון + מרווח + רצועה, ועוד מסדרון הקו.
	   נפרד מ---full-max כדי שהרצועה לא תכווץ את הכותרת. */
	--article-shell: calc(var(--content-max) + 2 * var(--sheet-pad) + 2.25rem + var(--rail-w));

	/* ══ תנועה ══ */
	--ease-out: cubic-bezier(.22, .61, .36, 1);
	--ease-spring: cubic-bezier(.34, 1.4, .64, 1);
	--dur-fast: 130ms;
	--dur-base: 240ms;

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

	/* ══ שיפוע המעברים האלכסוניים ══
	   מ-Rimac. אותה זווית בכל מעבר — שיפוע לא עקבי נקרא כרשלנות. */

	/* ══ הרשת הטכנית ══
	   מוטיב חוזר: רשת מדידה עדינה שמופיעה מאחורי כותרות ואזורי
	   מפתח. גודל התא קבוע כדי שהיא תיקרא כרשת ולא כרעש. */
	--grid-cell: 32px;
	/* על רקע בהיר יותר, קו לבן שקוף בולט פחות — הועלה כדי שהרשת
	   תישאר נראית באותה עוצמה כמו קודם */
	--grid-line: rgba(255, 255, 255, .045);
}

/* ══════════════════════════════════════════════════════════
   כללים גלובליים
   ══════════════════════════════════════════════════════════ */

/*
 * ── כלל ה-RTL הקריטי ──
 *
 * האתר כולו RTL, אבל **הגיאומטריה אינה מתהפכת**. אם מכולת SVG
 * תירש direction: rtl, הצד הימני של הרכב באיור יתחלף עם השמאלי —
 * והאתר ישקר לגולש בדיוק בנקודה שבה הוא הכי סומך עליו.
 *
 * רק טקסט ופריסה מתהפכים. ציור נשאר ציור.
 */
.at-viz,
.at-viz svg,
.at-viz canvas {
	direction: ltr;
}

/* מספרים ומונחים לועזיים בתוך טקסט עברי — מונע שיבוש BiDi */
.at-ltr {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-block;
}

/* מוטיב הרשת הטכנית, כמחלקת שירות */
.at-grid-bg {
	background-image:
		linear-gradient(to left, var(--grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
	background-size: var(--grid-cell) var(--grid-cell);
}

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

	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}