/* מיסטר קי — טוקני העיצוב. מקור אמת יחיד ל-CSS של התמה.
 *
 * אין hex קשיח מחוץ לקובץ הזה (למעט rgba() שקוף לצללים ולשכבות). כל רכיב
 * קורא custom properties מכאן.
 *
 * מודל המשטחים: זו תמה אחת שמערבבת משטח בהיר וכהה לפי סקשן (לא טוגל של
 * המשתמש). :root הוא ברירת המחדל הבהירה; כל אלמנט עם .mk-section--dark מהפך
 * את קבוצת --surface-* לכהה, ו-.mk-section--light מחזיר אותה (לקינון).
 * .mk-section--image מוסיף צילום רקע עם גרדיאנט ונושא את הקבוצה הכהה.
 * רכיבים קוראים --surface-bg / --surface-text / --surface-accent וכו' ולכן
 * מקבלים צבע אוטומטית לפי הסקשן שהם יושבים בו.
 */

:root {
	/* ---- פלטת מותג — הפטרול מהלוגו הרשמי של מיסטר קי ---- */
	--mk-navy: #284B63;        /* רקע כהה ראשי, טקסט כהה על בהיר */
	--mk-navy-deep: #1C3749;   /* פוטר, פסים כהים, סקשן חנות */
	--mk-navy-card: #2F5673;   /* כרטיסים על רקע כהה */
	--mk-border-dark: #3E6480; /* גבולות על כהה */

	--mk-white: #FFFFFF;
	--mk-cream: #FCFAF9;       /* רקע בהיר (צבע השמנת של הלוגו) */
	--mk-border-light: #E9E4E0;/* גבולות כרטיסים לבנים */
	--mk-ink-muted: #55666F;   /* טקסט משני על בהיר */
	--mk-muted: #B9C8D4;       /* טקסט משני על כהה */
	--mk-ink-on-dark: #E6EDF3;     /* טקסט גוף על כהה (בהיר מ---mk-muted) */

	--mk-gold: #F3B33F;        /* CTA והדגשות — אקסנט יחיד */
	--mk-gold-light: #F8CA6B;
	--mk-gold-deep: #D99A28;
	--mk-gold-text: #8F6416;   /* טקסט זהב על רקע בהיר — כהה מספיק ל-WCAG AA (5.0 על קרם) */

	--mk-whatsapp: #25D366;    /* כפתורי וואטסאפ בלבד */
	--mk-whatsapp-ink: #1DA851;/* טקסט וואטסאפ על בהיר (קונטרסט) */
	--mk-sale: #C94F35;        /* תג חיסכון/מבצע */
	--mk-success: #0E9F6E;     /* "חינם", הצלחה */

	/* ---- קבוצת משטח: בהיר (ברירת מחדל ב-:root) ---- */
	--surface-bg:         var(--mk-cream);
	--surface-bg-alt:     var(--mk-white);
	--surface-text:       var(--mk-navy);
	--surface-text-muted: var(--mk-ink-muted);
	--surface-accent:     var(--mk-gold-text);
	--surface-accent-2:   var(--mk-gold);
	--surface-border:     var(--mk-border-light);
	--surface-shadow:     rgba(40, 75, 99, .12);

	/* ---- טיפוגרפיה ---- */
	--font-display: 'Heebo', 'Arial Hebrew', system-ui, sans-serif;   /* כותרות 700-900 */
	--font-body:    'Assistant', 'Arial Hebrew', system-ui, sans-serif; /* גוף 400-700 */
	--font-num:     'Heebo', system-ui, monospace;                    /* סטטיסטיקות, ספרות טבלאיות */

	/* סקאלת גופן נוזלית (clamp: מינימום מובייל, אמצע נוזלי ב-vw, מקסימום דסקטופ).
	 * בלי מדרגות breakpoint — מתרחבת חלק ממובייל ל-4K. */
	--fs-display: clamp(36px, 5.2vw, 62px);  /* הירו */
	--fs-h1:      clamp(30px, 4.2vw, 48px);
	--fs-h2:      clamp(26px, 3.2vw, 40px);
	--fs-h3:      clamp(18px, 1.7vw, 24px);
	--fs-h4:      clamp(16px, 1.2vw, 18px);
	--fs-body:    clamp(15px, 1.05vw, 16.5px);
	--fs-lead:    clamp(16px, 1.4vw, 19px);  /* intro / תת-כותרת סקשן */
	--fs-small:   14.5px;
	--fs-micro:   12.5px;
	--fs-eyebrow: 13px;
	--fs-stat:    clamp(28px, 3.4vw, 44px);  /* מספרים גדולים */

	--lh-tight:   1.14;
	--lh-heading: 1.25;
	--lh-body:    1.65;   /* עברית נקראת טוב יותר עם רווח שורה פתוח */

	--fw-body:   400;
	--fw-medium: 600;
	--fw-bold:   700;
	--fw-black:  800;
	--fw-heavy:  900;

	/* ---- סקאלת מרווחים ---- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 96px;
	--sp-section: clamp(52px, 7vw, 92px);  /* קצב אנכי של סקשן */

	/* ---- פריסה ---- */
	--container-max: 1180px;
	--container-narrow: 820px;
	--gutter: 5%;
	--radius-sm: 8px;
	--radius: 12px;
	--radius-lg: 18px;
	--radius-xl: 24px;
	--radius-pill: 100px;

	/* ---- Header ---- */
	--header-height: 62px;
	--header-height-mobile: 58px;

	/* ---- צללים ---- */
	--shadow-sm: 0 1px 3px rgba(40, 75, 99, .10);
	--shadow:    0 8px 24px rgba(40, 75, 99, .18);
	--shadow-lg: 0 18px 48px rgba(40, 75, 99, .28);
	--shadow-gold: 0 8px 26px rgba(243, 179, 63, .35);

	/* ---- תנועה ---- */
	--ease-out:    cubic-bezier(.2, .7, .2, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--dur-fast: .15s;
	--dur:      .25s;
	--dur-slow: .6s;

	/* ---- z-index ---- */
	--z-sticky:    40;   /* sticky ATC, סינון */
	--z-header:    50;
	--z-floating:  60;   /* כפתורי יצירת קשר צפים */
	--z-nagish:    75;   /* טריגר הנגישות חייב לנצח את שורת המובייל */
	--z-modal:     90;   /* באנר עוגיות */
	--z-skip:     100;   /* קישור דילוג לתוכן */

	/* ברירת מחדל לצילום סקשן — נדרסת inline ע"י mrkey_bg(). בלי זה
	 * ה-shorthand של background ב-.mk-page-head היה נפסל כולו. */
	--mk-bg: none;

	/* ---- תאימות לאחור: שמות הרדיוסים הישנים ---- */
	--mk-font-display: var(--font-display);
	--mk-font-body: var(--font-body);
	--mk-radius-btn: var(--radius);
	--mk-radius-card: var(--radius-lg);
	--mk-radius-pill: var(--radius-pill);

	/* ---- גשר לרכיבים שהובאו מחגיגת (nagish, cookie-consent) ----
	 * הרכיבים האלה מועתקים 1:1 בין אתרי winmove; הגשר ממפה את שמות
	 * הטוקנים שלהם למותג של מיסטר קי במקום לשכתב את הקבצים. */
	--hb-charcoal: var(--mk-navy-deep);
	--hb-ink-600: var(--mk-navy-card);
	--hb-ink-700: var(--mk-navy);
	--hb-cream: var(--mk-cream);
	--hb-white: var(--mk-white);
	--hb-grey-300: var(--mk-muted);
	--hb-gold: var(--mk-gold);
	--hb-gold-light: var(--mk-gold-light);
	--hb-gold-deep: var(--mk-gold-text);
}

/* ---- קבוצת משטח: כהה ----
 * .mk-on-dark היא מחלקת השירות לרכיבים שתמיד כהים (header, footer, פס אמון,
 * הירו) ולכן לא מוצהרים כסקשן. */
.mk-section--dark,
.mk-section--deep,
.mk-on-dark {
	--surface-bg:         var(--mk-navy-deep);
	--surface-bg-alt:     var(--mk-navy-card);
	--surface-text:       var(--mk-white);
	--surface-text-muted: var(--mk-muted);
	--surface-accent:     var(--mk-gold);
	--surface-accent-2:   var(--mk-gold-deep);
	--surface-border:     #5A86A8;   /* 3.2:1 מול הרקע הכהה — עומד ב-WCAG 1.4.11 */
	--surface-shadow:     rgba(0, 0, 0, .35);
}

/* ---- קבוצת משטח: בהיר מפורש (להיפוך חוזר בתוך הורה כהה) ---- */
.mk-section--light {
	--surface-bg:         var(--mk-cream);
	--surface-bg-alt:     var(--mk-white);
	--surface-text:       var(--mk-navy);
	--surface-text-muted: var(--mk-ink-muted);
	--surface-accent:     var(--mk-gold-text);
	--surface-accent-2:   var(--mk-gold);
	--surface-border:     var(--mk-border-light);
	--surface-shadow:     rgba(40, 75, 99, .12);
}

/* ---- קבוצת משטח: צילום ----
 * המצב השלישי שהופך את האתר למונחה-צילום: כל סקשן יכול לשבת על תמונה.
 * נושא את הקבוצה הכהה, צובע את --mk-bg מעל הפטרול כ-fallback, ומניח
 * גרדיאנט לקריאות ולעומק. מגדירים את הצילום פר-סקשן:
 *   <section class="mk-section mk-section--image" style="<?= esc_attr( mrkey_bg( $file ) ) ?>">
 */
.mk-section--image {
	--surface-bg:         var(--mk-navy-deep);
	--surface-bg-alt:     var(--mk-navy-card);
	--surface-text:       var(--mk-white);
	--surface-text-muted: var(--mk-muted);
	--surface-accent:     var(--mk-gold);
	--surface-accent-2:   var(--mk-gold-deep);
	--surface-border:     #5A86A8;
	--surface-shadow:     rgba(0, 0, 0, .35);
	position: relative;
	isolation: isolate;
	background-image: var(--mk-bg);
	background-size: cover;
	/* ראש הפריים כברירת מחדל, דריסה פר-תמונה דרך mrkey_bg( $file, $focus ) */
	background-position: var(--mk-bg-pos, center top);
}
.mk-section--image::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(28, 55, 73, .78) 0%, rgba(28, 55, 73, .62) 42%, rgba(28, 55, 73, .90) 100%);
}