/*
 * 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 light;

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

	   הסולם עלה מ-#090b10 שהיה כמעט שחור. שחור מוחלט מעייף את
	   העין בקריאה ארוכה ומשטח את ההיררכיה: כשהרקע כבר בתחתית,
	   אין לאן להוריד את המשטח השקוע. */
	--bg: #15171c;
	--bg-raised: #1c1f26;
	--bg-sunken: #101217;
	--surface: #222630;
	--surface-hi: #2a2f3a;

	/* ── קווים ──
	   שקיפות ולא צבע קבוע: הקו מתאים את עצמו לכל משטח שמתחתיו,
	   וכך נשמר אותו משקל ויזואלי בכל עומק. */
	--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;

	/* ── אקצנט יחיד ──
	   ציאן מדויק. משמש לאינטראקציה, לפוקוס ולערך הפעיל — ולשום
	   דבר דקורטיבי. */
	--accent: #2fe3d0;
	--accent-dim: #178d81;
	--accent-soft: rgba(47, 227, 208, .12);

	/* ── צבע סמנטי ──
	   הקידוד הזה עקבי בכל האתר ובכל ההמחשות, וזה לא קישוט: גולש
	   שלמד ש"כתום = חריגה" בעמוד הקאמבר חייב לראות את אותו כתום
	   באותה משמעות בסימולטור ובמפענח דוח הכיול. */
	--sig-ok: #4d9dff;
	--sig-ok-soft: rgba(77, 157, 255, .14);
	--sig-warn: #ffa23a;
	--sig-warn-soft: rgba(255, 162, 58, .13);
	--sig-wear: #ff5f57;
	--sig-wear-soft: rgba(255, 95, 87, .13);
	--sig-neutral: #556074;

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

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

	/* ── קו הסקיצה של איורי הרכב ──
	   איור קווי טכני: מתאר בהיר, קווי פנים עמומים ממנו, ומילוי כמעט
	   שקוף. שלוש הרמות הן מה שנותן עומק בלי צל ובלי גרדיאנט —
	   וחשוב מכך, הן שומרות על הסמנים (קאמבר, trail, קפיצים) קריאים
	   מעל האיור במקום להיבלע בו. */
	--sketch-line: #8b95a8;
	--sketch-soft: #5a6478;
	--sketch-fill: rgba(255, 255, 255, .025);
	--sketch-glass: rgba(120, 200, 255, .05);

	/* ══ טיפוגרפיה ══ */
	--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 ══ */
	--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-sm: 0 1px 2px rgba(0, 0, 0, .45);
	--shadow-md: 0 4px 20px -6px rgba(0, 0, 0, .6);
	--shadow-glow: 0 0 0 1px var(--accent-soft), 0 0 28px -10px var(--accent);

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

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

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

	/* ══ שיפוע המעברים האלכסוניים ══
	   מ-Rimac. אותה זווית בכל מעבר — שיפוע לא עקבי נקרא כרשלנות. */
	--slant: 2.2deg;
	--slant-h: 4.5vw;

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

/* ── מצב בהיר ── */
:root[data-theme="light"] {
	color-scheme: light;

	--bg: #ffffff;
	--bg-raised: #f7f9fb;
	--bg-sunken: #eef1f6;
	--surface: #ffffff;
	--surface-hi: #f2f5f9;

	--hairline: rgba(9, 11, 16, .06);
	--border: rgba(9, 11, 16, .11);
	--border-strong: rgba(9, 11, 16, .22);

	--text: #0d1117;
	--text-muted: #55606f;
	--text-faint: #7d8798;

	--accent: #0d9e90;
	--accent-dim: #0b7d72;
	--accent-soft: rgba(13, 158, 144, .11);

	--sig-ok: #0b62d0;
	--sig-ok-soft: rgba(11, 98, 208, .1);
	--sig-warn: #a75a06;
	--sig-warn-soft: rgba(167, 90, 6, .1);
	--sig-wear: #c22f26;
	--sig-wear-soft: rgba(194, 47, 38, .1);
	--sig-neutral: #8a93a3;

	--tyre: #d3d8e0;
	--tyre-edge: #98a1b0;
	--road: #e8ecf2;

	/* בבהיר הקו מתהפך: כהה על רקע בהיר, אחרת האיור נעלם */
	--sketch-line: #5b6478;
	--sketch-soft: #98a1b0;
	--sketch-fill: rgba(9, 11, 16, .03);
	--sketch-glass: rgba(11, 98, 208, .06);

	--shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
	--shadow-md: 0 4px 20px -6px rgba(16, 24, 40, .14);
	--shadow-glow: 0 0 0 1px var(--accent-soft), 0 0 24px -12px var(--accent);

	--grid-line: rgba(9, 11, 16, .035);
}

/* מכבדים את העדפת המערכת כשהמשתמש לא בחר ידנית.
   data-theme על ה-root תמיד גובר — זו הבחירה המפורשת של הגולש. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]):not([data-theme="light"]) {
		color-scheme: light;

		--bg: #ffffff;
		--bg-raised: #f7f9fb;
		--bg-sunken: #eef1f6;
		--surface: #ffffff;
		--surface-hi: #f2f5f9;

		--hairline: rgba(9, 11, 16, .06);
		--border: rgba(9, 11, 16, .11);
		--border-strong: rgba(9, 11, 16, .22);

		--text: #0d1117;
		--text-muted: #55606f;
		--text-faint: #7d8798;

		--accent: #0d9e90;
		--accent-dim: #0b7d72;
		--accent-soft: rgba(13, 158, 144, .11);

		--sig-ok: #0b62d0;
		--sig-ok-soft: rgba(11, 98, 208, .1);
		--sig-warn: #a75a06;
		--sig-warn-soft: rgba(167, 90, 6, .1);
		--sig-wear: #c22f26;
		--sig-wear-soft: rgba(194, 47, 38, .1);
		--sig-neutral: #8a93a3;

		--tyre: #d3d8e0;
		--tyre-edge: #98a1b0;
		--road: #e8ecf2;

		--sketch-line: #5b6478;
		--sketch-soft: #98a1b0;
		--sketch-fill: rgba(9, 11, 16, .03);
		--sketch-glass: rgba(11, 98, 208, .06);

		--shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
		--shadow-md: 0 4px 20px -6px rgba(16, 24, 40, .14);

		--grid-line: rgba(9, 11, 16, .035);
	}
}

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

/*
 * ── כלל ה-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;
		--dur-slow: 0ms;
	}

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