/* ==========================================================================
   Ran Kalif — design tokens  (v1 · 2026-11-02)
   מקור אמת אחד לצבע, טיפוגרפיה, ריווח וגבולות.
   - כל רכיבי ה-Custom Element (rk-hero, rk-events ועוד) וגם concept-final.html משתמשים בו.
   - כתוב כ-CSS Custom Properties בלבד, בלי תלות ב-Wix, כדי שאפשר יהיה להעביר
     אותו כמו שהוא לפלטפורמה הבאה (Next.js / Astro / Webflow / Framer וכו').
   - שמות לפי תפקיד (role), לא לפי צבע, כדי שהחלפת מותג תהיה שינוי בקובץ אחד.
   - שינוי כאן → להריץ `node wix-custom-elements/build-tokens.mjs` כדי לעדכן את
     העותק שמוטמע ב-JS של הרכיבים (Wix לא מאפשר לקשר קובץ CSS חיצוני לרכיב).
   ========================================================================== */
:root {
  /* ---- צבע: פלטה בסיסית ---- */
  --rk-color-night: #0b1040;        /* רקע hero, פוטר, מצב אירוע */
  --rk-color-ran-blue: #25318d;     /* הכחול של המותג (לוגו, האתר הקיים) */
  --rk-color-sky: #b7c8f0;          /* פעולה ראשית, הדגשות על רקע כהה */
  --rk-color-paper: #f3f5fb;        /* סקשנים מתחלפים */
  --rk-color-white: #ffffff;
  --rk-color-ink: #141833;          /* טקסט ראשי */
  --rk-color-muted: #545a78;        /* טקסט משני (AA על לבן ועל paper) */
  --rk-color-line: #d9deee;         /* קווי הפרדה, מסגרות */
  --rk-color-gold: #f0b46a;         /* רק במצב "אירוע מוביל": נקודת זמן ופעולה */

  /* ---- צבע: תפקידים ---- */
  --rk-bg: var(--rk-color-white);
  --rk-bg-alt: var(--rk-color-paper);
  --rk-bg-inverse: var(--rk-color-night);
  --rk-text: var(--rk-color-ink);
  --rk-text-muted: var(--rk-color-muted);
  --rk-text-inverse: #ffffff;
  --rk-text-inverse-muted: #c9d2f2;
  --rk-accent: var(--rk-color-ran-blue);
  --rk-action: var(--rk-color-sky);
  --rk-action-text: var(--rk-color-night);
  --rk-action-event: var(--rk-color-gold);
  --rk-focus: var(--rk-color-sky);  /* רק על רקע כהה (10.8:1 על night). על לבן הוא 1.7:1 ולכן הטבעת היא דו-צבעית, ראו --rk-focus-ring */

  /* ---- נגישות (TASK-accessibility, 5.11.2026). יחסי ניגודיות מחושבים לפי WCAG ---- */
  /* טבעת פוקוס דו-צבעית: לבן מבפנים (outline) + night מבחוץ (box-shadow). נראית על כל רקע: 18:1 על לבן ועל night */
  --rk-focus-ring: #ffffff;
  --rk-focus-halo: var(--rk-color-night);
  --rk-color-line-strong: #6e7491;  /* מסגרת לשדות טופס ולרכיבי ממשק: 4.6:1 על לבן (נדרש 3:1). --rk-color-line נשאר לקווי הפרדה דקורטיביים */
  --rk-text-subtle: #6e7491;        /* במקום #9aa0b4 (2.6:1) לאפשרות "0 תוצאות" וכדומה: 4.6:1 על לבן */
  --rk-error: #b3261e;              /* הודעות שגיאה: 6.5:1 על לבן, 6.0:1 על paper */
  --rk-error-on-dark: #ffb4ab;      /* שגיאה על night: 10.6:1 */
  --rk-a11y-fab-bg: var(--rk-color-night);   /* כפתור הנגישות: לבן על night 18:1 */
  --rk-a11y-fab-fg: #ffffff;
  --rk-a11y-fab-ring: #ffffff;      /* מסגרת לבנה: הכפתור נראה גם מעל הפוטר הכהה */
  --rk-a11y-line: var(--rk-color-line-strong);

  /* ---- טיפוגרפיה ---- */
  --rk-font-display: "Rubik", "Assistant", system-ui, sans-serif;   /* כותרות */
  --rk-font-body: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rk-font-poster: "Karantina", "Rubik", sans-serif;                /* רק פוסטר אירוע */
  --rk-weight-body: 400;
  --rk-weight-strong: 700;
  --rk-weight-display: 800;

  /* סולם (מובייל → דסקטופ), יחס ~1.25 */
  --rk-size-xs: 14px;
  --rk-size-sm: 16px;
  --rk-size-body: 18px;
  --rk-size-lede: clamp(19px, 1.2vw + 14px, 22px);
  --rk-size-h3: clamp(20px, 0.6vw + 17px, 24px);
  --rk-size-h2: clamp(32px, 2.4vw + 20px, 48px);
  --rk-size-h1: clamp(64px, 7vw + 30px, 132px);
  --rk-size-poster: clamp(76px, 9vw + 30px, 168px);
  --rk-leading-body: 1.65;
  --rk-leading-tight: 1.08;

  /* ---- ריווח ומבנה ---- */
  --rk-space-1: 4px;
  --rk-space-2: 8px;
  --rk-space-3: 12px;
  --rk-space-4: 16px;
  --rk-space-5: 24px;
  --rk-space-6: 32px;
  --rk-space-7: 48px;
  --rk-space-8: 72px;
  --rk-space-9: 112px;
  --rk-wrap: 980px;                   /* רוחב התוכן = הגריד של Wix הקלאסי (980). כך ה-header הנייטיב, ה-hero והסקשנים מיושרים לאותו קו */
  --rk-gutter: 16px;                  /* מובייל; בדסקטופ 32 */

  /* ---- צורה ---- */
  --rk-radius-sm: 8px;                /* תגיות, תמונות קטנות */
  --rk-radius-md: 14px;               /* כרטיסים */
  --rk-radius-pill: 10px;             /* אין גלולות באתר: כל הכפתורים והתוויות במלבן מעוגל אחיד (כמו --rk-radius-ctl) */

  /* ---- גבהים קבועים לרכיבים (חשוב ל-Wix: מסגרת קבועה בעורך) ---- */
  --rk-header-h: 76px;               /* header נייטיב, דסקטופ */
  --rk-header-h-mobile: 60px;         /* header נייטיב, מובייל */
  --rk-header-bg: var(--rk-color-night); /* #0B1040: זהה לקצה העליון של ה-hero, ולכן אין תפר */
  --rk-hero-h-desktop: 760px;
  --rk-hero-h-mobile: 720px;

  /* ---- תנועה ---- */
  --rk-ease: cubic-bezier(.2, .7, .2, 1);
  --rk-dur: 180ms;

  /* ---- breakpoints (לתיעוד; CSS לא מאפשר משתנה ב-media) ----
     mobile < 760 · tablet 760–1023 · desktop ≥ 1024 */
}