/* ============================================================
   רבדים · דשבורד v2 — Design Tokens ("לילה ניאון")
   ------------------------------------------------------------
   מקור אמת יחיד לכל ערכי העיצוב. אין hex בקבצי CSS/JS אחרים —
   רק var(--token). הפלטה הזוכה (design-verdict.md): מועמד 3,
   פלטה A "לילה ניאון" — כהה כברירת מחדל; פלטה B "קונפטי" —
   fallback בהיר (prefers-color-scheme + מתג data-theme).

   פונט: Heebo variable מקומי (web/fonts/heebo-*.woff2) —
   ה-@font-face מוגדר ב-style.css, לא כאן.

   כללי שימוש (design-spec-v2.md §0):
   - גרדיאנט מלא רק ל: שורת בוקר, 4 KPI hero, שלב "רכשו", טאב פעיל, לוגו.
   - ירוק/אדום שמורים לדלתא/סטטוס בלבד, תמיד עם ▲/▼.
   - צבעי סדרות: --chart-1..8 בסדר קבוע; ערוצי תנועה ממופים קבוע (§3.8).
   ============================================================ */

:root {
  color-scheme: dark;

  /* ── טיפוגרפיה ─────────────────────────────────────────── */
  --font-family: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-morning:  clamp(2.2rem, 4vw, 3.4rem);   /* המספר של שורת הבוקר */
  --fs-kpi-hero: clamp(1.9rem, 2.8vw, 2.6rem); /* ערך KPI hero */
  --fs-kpi-sub:  24px;   /* ערך KPI משני */
  --fs-section:  20px;   /* כותרת section */
  --fs-card:     14px;   /* כותרת כרטיס */
  --fs-body:     13.5px; /* גוף, טבלאות */
  --fs-label:    12px;   /* תוויות, דלתאות */
  --fs-caption:  11px;   /* hint, מטא, צירים */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;    /* כותרות כרטיסים, badges */
  --fw-black:    800;    /* מספרי KPI — "המספר הוא הגיבור" */

  --lh-tight:  1.05;     /* מספרים גדולים */
  --lh-normal: 1.5;
  --ls-num:   -0.02em;   /* letter-spacing למספרים גדולים */

  /* ── רקעים ומשטחים (פלטה A) ────────────────────────────── */
  --bg:         #0B1120;  /* רקע עמוד — כחול-שחור עמוק */
  --bg-2:       #111A2E;  /* stop שני לגרדיאנט הרקע */
  --bg-grad:    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  --surface:    #151F35;  /* כרטיס רגיל */
  --surface-2:  #1C2A47;  /* hover, dropdowns, שקעים, שלבי משפך */

  /* הילות ניאון ברקע (body::before; במצב בהיר — none) */
  --bg-halos:
    radial-gradient(900px 500px at 85% -8%, rgba(34, 211, 238, .08), transparent 60%),
    radial-gradient(900px 550px at 8% 12%, rgba(167, 139, 250, .09), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(244, 114, 182, .05), transparent 60%);

  /* ── טקסט ──────────────────────────────────────────────── */
  --text:    #F1F5FD;  /* ראשי */
  --text-2:  #8FA3C8;  /* תוויות, כותרות משנה */
  --text-3:  #7C8DB5;  /* עמום: תאריכים, hint, צירים (≈4.9:1 על --surface — AA) */
  --on-accent: #07101F; /* טקסט על --grad-accent (צ'יפ/מתג פעיל) */

  /* ── קווים ─────────────────────────────────────────────── */
  --border:        rgba(96, 130, 255, .16);  /* גבול כרטיס */
  --border-strong: rgba(96, 130, 255, .40);  /* hover / פוקוס עדין */
  --divider:       rgba(96, 130, 255, .08);  /* קווי טבלה פנימיים */
  --grid-line:     rgba(96, 130, 255, .10);  /* קווי רשת בגרפים */

  /* ── 8 צבעי סדרות (סדר קבוע! בהירות מותאמת לרקע כהה) ───── */
  --chart-1: #22D3EE;  /* ציאן חשמלי — הסדרה הראשית (הכנסות, אורגני) */
  --chart-2: #A78BFA;  /* סגול זוהר — משנית (הזמנות, ממומן) */
  --chart-3: #F472B6;  /* מגנטה — מובייל, סושיאל */
  --chart-4: #A3E635;  /* ליים — המרות, חיובי-לא-סמנטי */
  --chart-5: #FBBF24;  /* ענבר — ממוצעים, AOV */
  --chart-6: #FB923C;  /* כתום-אלמוגי — אזהרות רכות */
  --chart-7: #60A5FA;  /* כחול רויאל — דסקטופ, ישיר */
  --chart-8: #34D399;  /* טורקיז-מנטה — לקוחות חוזרים, אימייל */

  /* אליאסים סמנטיים (זהים ל-chart-*; לשימוש בקוד קריא) */
  --c-cyan:    var(--chart-1);
  --c-purple:  var(--chart-2);
  --c-magenta: var(--chart-3);
  --c-lime:    var(--chart-4);
  --c-amber:   var(--chart-5);
  --c-orange:  var(--chart-6);
  --c-blue:    var(--chart-7);
  --c-mint:    var(--chart-8);

  /* רקעי soft ל-badges (צבע-סדרה ב-14%) */
  --soft-cyan:    rgba(34, 211, 238, .14);
  --soft-purple:  rgba(167, 139, 250, .14);
  --soft-magenta: rgba(244, 114, 182, .14);
  --soft-lime:    rgba(163, 230, 53, .14);
  --soft-amber:   rgba(251, 191, 36, .14);
  --soft-orange:  rgba(251, 146, 60, .14);
  --soft-blue:    rgba(96, 165, 250, .14);
  --soft-mint:    rgba(52, 211, 153, .14);
  --soft-gray:    rgba(143, 163, 200, .12);

  /* קו רפאים — תקופת ההשוואה בגרפים */
  --chart-ghost: rgba(143, 163, 200, .55);
  /* מילוי מתחת לקו הראשי (35% למעלה → שקוף; ערך עליון לגרדיאנט canvas) */
  --chart-fill-top: rgba(34, 211, 238, .35);

  /* ── גרדיאנטים (135deg; שמורים ל-hero בלבד) ────────────── */
  --grad-rev:    linear-gradient(135deg, #7C3AED 0%, #DB2777 55%, #F97316 100%); /* הכנסות + שורת בוקר */
  --grad-ord:    linear-gradient(135deg, #0EA5E9 0%, #6366F1 100%);              /* הזמנות */
  --grad-aov:    linear-gradient(135deg, #059669 0%, #0D9488 60%, #0891B2 100%); /* סל ממוצע + שלב "רכשו" */
  --grad-cvr:    linear-gradient(135deg, #D97706 0%, #DC2626 100%);              /* יחס המרה */
  --grad-accent: linear-gradient(90deg, #22D3EE, #A78BFA);                       /* פסי אקסנט, צ'יפ פעיל, פסי התקדמות */

  /* overlay כהה עדין על גרדיאנטים — קריאות טקסט על האזור הבהיר */
  --grad-overlay: linear-gradient(0deg, rgba(0, 0, 0, .14), transparent 55%);
  /* טקסט על גרדיאנט */
  --on-grad:   #FFFFFF;
  --on-grad-2: rgba(255, 255, 255, .85);           /* משני — לא פחות מ-85%! */
  --on-grad-badge: rgba(255, 255, 255, .20);       /* רקע badge דלתא על גרדיאנט */
  --num-shadow: 0 1px 3px rgba(0, 0, 0, .30);      /* text-shadow למספרים על גרדיאנט */

  /* ── דלתאות (תמיד עם ▲/▼) ──────────────────────────────── */
  --delta-up:        #4ADE80;
  --delta-down:      #F87171;
  --delta-up-soft:   rgba(74, 222, 128, .12);
  --delta-down-soft: rgba(248, 113, 113, .12);

  /* ── חומרת תובנות (פסי צד + badges) ────────────────────── */
  --sev-opp:        var(--c-mint);
  --sev-opp-soft:   var(--soft-mint);
  --sev-opp-strip:  linear-gradient(180deg, #34D399, #A3E635);
  --sev-warn:       var(--c-orange);
  --sev-warn-soft:  var(--soft-orange);
  --sev-warn-strip: linear-gradient(180deg, #FBBF24, #FB923C);
  --sev-info:       var(--c-blue);
  --sev-info-soft:  var(--soft-blue);
  --sev-info-strip: linear-gradient(180deg, #60A5FA, #A78BFA);

  /* ── סטטוס מערכת / הזמנות ──────────────────────────────── */
  --status-ok:         var(--c-mint);
  --status-ok-soft:    var(--soft-mint);
  --status-warn:       var(--c-amber);
  --status-warn-soft:  var(--soft-amber);
  --status-alert:      var(--delta-down);
  --status-alert-soft: var(--delta-down-soft);

  /* ── צללים + glow ──────────────────────────────────────── */
  --shadow-card:       0 4px 16px rgba(0, 0, 0, .25);
  --shadow-card-hover: 0 10px 28px rgba(0, 0, 0, .35);
  --shadow-float:      0 8px 32px rgba(0, 0, 0, .50);   /* dropdowns, sheets */
  --glow-rev: 0 8px 32px rgba(124, 58, 237, .25), 0 20px 60px rgba(219, 39, 119, .18);
  --glow-ord: 0 6px 24px rgba(14, 165, 233, .22);
  --glow-aov: 0 6px 24px rgba(13, 148, 136, .22);
  --glow-cvr: 0 6px 24px rgba(220, 38, 38, .22);
  --glow-accent: 0 2px 14px rgba(34, 211, 238, .35);    /* צ'יפ/מתג פעיל */
  --glow-bar:  0 0 8px rgba(34, 211, 238, .40);         /* פסי התקדמות */
  /* glow לפסים צבעוניים (hbar מוביל / פס מובייל) — בבהיר: none (§10) */
  --glow-hbar: 0 0 8px var(--hbar-c, var(--chart-1));
  --glow-bar-mobile: 0 0 8px var(--chart-3);

  /* ── רדיוסים ───────────────────────────────────────────── */
  --r-hero:  24px;   /* שורת הבוקר */
  --r-card:  20px;   /* כרטיסים */
  --r-tile:  16px;   /* שלבי משפך, תובנות, אריחי שיא */
  --r-inner: 12px;   /* פנימיים: thumb, tooltip, inputs */
  --r-thumb: 10px;   /* תמונות מוצר 40px */
  --r-pill:  999px;  /* צ'יפים, badges, פסי התקדמות */

  /* ── סולם מרווחים (בסיס 4px) ───────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ── פריסה ─────────────────────────────────────────────── */
  --page-max-width: 1280px;
  --page-pad: 24px;          /* מובייל: 14px (ב-media query של style.css) */
  --grid-gap: 16px;
  --card-padding: 20px;

  /* ── זכוכית (header דביק, tooltips בלבד) ───────────────── */
  --glass-bg:   rgba(21, 31, 53, .72);
  --glass-blur: blur(14px);
  --tooltip-bg: rgba(21, 31, 53, .92);
  --tooltip-border: rgba(255, 255, 255, .10);

  /* ── תנועה ─────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-hover:   0.2s;    /* hover lift */
  --dur-count:   1200ms;  /* count-up (easeOutExpo ב-JS) */
  --dur-count-sm: 500ms;  /* count-up בהחלפת תקופה/מדד */
  --dur-reveal:  400ms;   /* כניסת כרטיס */
  --stagger:     70ms;    /* delay בין כרטיסים (מקס' 700ms) */
  --dur-draw:    800ms;   /* ציור גרפים */
  --dur-dismiss: 300ms;   /* דחיית תובנה */

  /* ── skeleton (shimmer) ────────────────────────────────── */
  --skeleton-base:      var(--surface-2);
  --skeleton-highlight: #253656;
  --skeleton-on-grad:   rgba(255, 255, 255, .40); /* שלד ערך על כרטיס גרדיאנט */
}

/* ============================================================
   מצב בהיר — "קונפטי" (פלטה B). שני מנגנונים:
   1. prefers-color-scheme: light — כשאין בחירה ידנית.
   2. מתג ידני data-theme="light" — גובר על המערכת
      (וה-guard :not([data-theme="dark"]) שומר שכהה-ידני גובר על מערכת-בהירה).
   שני הבלוקים חייבים להישאר זהים; עדכון באחד = עדכון בשני.
   לא מתהפכים: גרדיאנטים של ה-hero (טקסט לבן עובר גם על בהיר),
   רדיוסים, מרווחים, טיפוגרפיה, תנועה.
   ============================================================ */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="electric"]) {
    color-scheme: light;

    --bg:        #F8F7FF;
    --bg-2:      #F2F6FF;
    --bg-grad:   linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    --surface:   #FFFFFF;
    --surface-2: #F1F3F9;
    --bg-halos:  none;               /* בלי הילות ניאון בבהיר */

    --text:    #111827;
    --text-2:  #5B6478;
    --text-3:  #6B7280;  /* AA על לבן (≈4.8:1) */
    --on-accent: #FFFFFF;            /* הצ'יפ הפעיל בבהיר: גרדיאנט סגול-מגנטה כהה */

    --border:        #E4E8F2;
    --border-strong: #C7CFE4;
    --divider:       #EDF0F7;
    --grid-line:     #EBEEF6;

    /* 8 צבעי סדרות — רוויים וכהים, ≥3:1 מול לבן */
    --chart-1: #0891B2;  /* ציאן כהה */
    --chart-2: #6D28D9;  /* סגול */
    --chart-3: #DB2777;  /* מגנטה */
    --chart-4: #4D7C0F;  /* ליים כהה (ולידציה מול לבן) */
    --chart-5: #D97706;  /* ענבר */
    --chart-6: #EA580C;  /* כתום */
    --chart-7: #2563EB;  /* כחול */
    --chart-8: #059669;  /* מנטה כהה */

    --soft-cyan:    rgba(8, 145, 178, .12);
    --soft-purple:  rgba(109, 40, 217, .12);
    --soft-magenta: rgba(219, 39, 119, .12);
    --soft-lime:    rgba(77, 124, 15, .12);
    --soft-amber:   rgba(217, 119, 6, .12);
    --soft-orange:  rgba(234, 88, 12, .12);
    --soft-blue:    rgba(37, 99, 235, .12);
    --soft-mint:    rgba(5, 150, 105, .12);
    --soft-gray:    rgba(91, 100, 120, .10);

    --chart-ghost: rgba(17, 24, 39, .30);
    --chart-fill-top: rgba(8, 145, 178, .18);

    /* צ'יפ פעיל בבהיר: גרדיאנט כהה במקום ציאן-בהיר */
    --grad-accent: linear-gradient(135deg, #7C3AED, #DB2777);
    --glow-accent: 0 6px 14px -4px rgba(124, 58, 237, .45);

    --delta-up:        #059669;
    --delta-down:      #DC2626;
    --delta-up-soft:   #ECFDF5;
    --delta-down-soft: #FEF2F2;

    --sev-opp:       #047857;
    --sev-opp-soft:  #ECFDF5;
    --sev-warn:      #C2410C;
    --sev-warn-soft: #FFF7ED;
    --sev-info:      #4338CA;
    --sev-info-soft: #EEF2FF;

    --status-ok:         #047857;
    --status-ok-soft:    #ECFDF5;
    --status-warn:       #B45309;
    --status-warn-soft:  #FFFBEB;
    --status-alert:      #DC2626;
    --status-alert-soft: #FEF2F2;

    /* צללים רכים; glow צבעוני רק סביב ה-hero, מעודן */
    --shadow-card:       0 2px 12px rgba(29, 36, 51, .06);
    --shadow-card-hover: 0 10px 28px rgba(29, 36, 51, .12);
    --shadow-float:      0 12px 32px rgba(29, 36, 51, .16);
    --glow-rev: 0 14px 30px -10px rgba(124, 58, 237, .35);
    --glow-ord: 0 12px 26px -10px rgba(14, 165, 233, .30);
    --glow-aov: 0 12px 26px -10px rgba(13, 148, 136, .30);
    --glow-cvr: 0 12px 26px -10px rgba(220, 38, 38, .28);
    --glow-bar:  none;
    --glow-hbar: none;
    --glow-bar-mobile: none;

    --glass-bg:   rgba(255, 255, 255, .86);
    --tooltip-bg: rgba(255, 255, 255, .96);
    --tooltip-border: #E4E8F2;

    --skeleton-base:      #EDF0F7;
    --skeleton-highlight: #F7F9FD;
    --skeleton-on-grad:   rgba(255, 255, 255, .55);
  }
}

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

  --bg:        #F8F7FF;
  --bg-2:      #F2F6FF;
  --bg-grad:   linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  --surface:   #FFFFFF;
  --surface-2: #F1F3F9;
  --bg-halos:  none;

  --text:    #111827;
  --text-2:  #5B6478;
  --text-3:  #6B7280;  /* AA על לבן (≈4.8:1) */
  --on-accent: #FFFFFF;

  --border:        #E4E8F2;
  --border-strong: #C7CFE4;
  --divider:       #EDF0F7;
  --grid-line:     #EBEEF6;

  --chart-1: #0891B2;
  --chart-2: #6D28D9;
  --chart-3: #DB2777;
  --chart-4: #4D7C0F;
  --chart-5: #D97706;
  --chart-6: #EA580C;
  --chart-7: #2563EB;
  --chart-8: #059669;

  --soft-cyan:    rgba(8, 145, 178, .12);
  --soft-purple:  rgba(109, 40, 217, .12);
  --soft-magenta: rgba(219, 39, 119, .12);
  --soft-lime:    rgba(77, 124, 15, .12);
  --soft-amber:   rgba(217, 119, 6, .12);
  --soft-orange:  rgba(234, 88, 12, .12);
  --soft-blue:    rgba(37, 99, 235, .12);
  --soft-mint:    rgba(5, 150, 105, .12);
  --soft-gray:    rgba(91, 100, 120, .10);

  --chart-ghost: rgba(17, 24, 39, .30);
  --chart-fill-top: rgba(8, 145, 178, .18);

  --grad-accent: linear-gradient(135deg, #7C3AED, #DB2777);
  --glow-accent: 0 6px 14px -4px rgba(124, 58, 237, .45);

  --delta-up:        #059669;
  --delta-down:      #DC2626;
  --delta-up-soft:   #ECFDF5;
  --delta-down-soft: #FEF2F2;

  --sev-opp:       #047857;
  --sev-opp-soft:  #ECFDF5;
  --sev-warn:      #C2410C;
  --sev-warn-soft: #FFF7ED;
  --sev-info:      #4338CA;
  --sev-info-soft: #EEF2FF;

  --status-ok:         #047857;
  --status-ok-soft:    #ECFDF5;
  --status-warn:       #B45309;
  --status-warn-soft:  #FFFBEB;
  --status-alert:      #DC2626;
  --status-alert-soft: #FEF2F2;

  --shadow-card:       0 2px 12px rgba(29, 36, 51, .06);
  --shadow-card-hover: 0 10px 28px rgba(29, 36, 51, .12);
  --shadow-float:      0 12px 32px rgba(29, 36, 51, .16);
  --glow-rev: 0 14px 30px -10px rgba(124, 58, 237, .35);
  --glow-ord: 0 12px 26px -10px rgba(14, 165, 233, .30);
  --glow-aov: 0 12px 26px -10px rgba(13, 148, 136, .30);
  --glow-cvr: 0 12px 26px -10px rgba(220, 38, 38, .28);
  --glow-bar:  none;
    --glow-hbar: none;
    --glow-bar-mobile: none;

  --glass-bg:   rgba(255, 255, 255, .86);
  --tooltip-bg: rgba(255, 255, 255, .96);
  --tooltip-border: #E4E8F2;

  --skeleton-base:      #EDF0F7;
  --skeleton-highlight: #F7F9FD;
  --skeleton-on-grad:   rgba(255, 255, 255, .55);
}

/* ============================================================
   ערכה שלישית — "כהה חשמלי" (פלטה C, "זריחת מגנטה").
   נבחרת ידנית בלבד: data-theme="electric" (אין מנגנון מערכת).
   כהה-סגול דרמטי; גרדיאנט חתימה: זריחת מגנטה→כתום.
   ============================================================ */
:root[data-theme="electric"] {
  color-scheme: dark;

  /* רקעים ומשטחים */
  --bg:        #150B2E;
  --bg-2:      #1B0F3B;
  --surface:   #1E1240;
  --surface-2: #2A1B57;
  --bg-halos:
    radial-gradient(1200px 600px at 80% -10%, rgba(217, 70, 239, .15), transparent 60%),
    radial-gradient(900px 550px at 8% 15%, rgba(126, 34, 206, .14), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(249, 115, 22, .07), transparent 60%);

  /* טקסט */
  --text:      #F5F0FF;
  --text-2:    #B5A3E0;
  --text-3:    #8D7BBE;
  --on-accent: #1A0533;

  /* קווים */
  --border:        rgba(217, 70, 239, .18);
  --border-strong: rgba(217, 70, 239, .42);
  --divider:       rgba(217, 70, 239, .09);
  --grid-line:     rgba(217, 70, 239, .11);

  /* 8 צבעי סדרות */
  --chart-1: #E879F9;  /* פוקסיה — ראשית */
  --chart-2: #FB923C;  /* כתום */
  --chart-3: #FDE047;  /* צהוב */
  --chart-4: #5EEAD4;  /* טורקיז */
  --chart-5: #93C5FD;  /* תכלת */
  --chart-6: #F9A8D4;  /* ורוד */
  --chart-7: #86EFAC;  /* ירוק */
  --chart-8: #C4B5FD;  /* לבנדר */

  --soft-cyan:    rgba(232, 121, 249, .14);
  --soft-purple:  rgba(251, 146, 60, .14);
  --soft-magenta: rgba(253, 224, 71, .14);
  --soft-lime:    rgba(94, 234, 212, .14);
  --soft-amber:   rgba(147, 197, 253, .14);
  --soft-orange:  rgba(249, 168, 212, .14);
  --soft-blue:    rgba(134, 239, 172, .14);
  --soft-mint:    rgba(196, 181, 253, .14);
  --soft-gray:    rgba(181, 163, 224, .12);

  --chart-ghost:    rgba(181, 163, 224, .55);
  --chart-fill-top: rgba(232, 121, 249, .35);

  /* גרדיאנטים — "הזריחה" */
  --grad-rev:    linear-gradient(135deg, #7E22CE 0%, #D946EF 45%, #F97316 100%);
  --grad-ord:    linear-gradient(135deg, #4C1D95 0%, #7E22CE 100%);
  --grad-aov:    linear-gradient(135deg, #0F766E 0%, #0D9488 60%, #0891B2 100%);
  --grad-cvr:    linear-gradient(135deg, #BE185D 0%, #F97316 100%);
  --grad-accent: linear-gradient(90deg, #E879F9, #FB923C);

  /* תובנות — פסי חומרה */
  --sev-opp-strip:  linear-gradient(180deg, #5EEAD4, #86EFAC);
  --sev-warn-strip: linear-gradient(180deg, #FDE047, #FB923C);
  --sev-info-strip: linear-gradient(180deg, #93C5FD, #C4B5FD);

  /* צללים + glow */
  --glow-rev: 0 8px 32px rgba(217, 70, 239, .28), 0 20px 60px rgba(249, 115, 22, .16);
  --glow-ord: 0 6px 24px rgba(126, 34, 206, .26);
  --glow-aov: 0 6px 24px rgba(13, 148, 136, .22);
  --glow-cvr: 0 6px 24px rgba(190, 24, 93, .24);
  --glow-accent: 0 2px 14px rgba(232, 121, 249, .35);
  --glow-bar:  0 0 8px rgba(232, 121, 249, .40);
  --glow-bar-mobile: 0 0 8px var(--chart-3);

  /* זכוכית + skeleton */
  --glass-bg:   rgba(30, 18, 64, .72);
  --tooltip-bg: rgba(30, 18, 64, .92);
  --skeleton-highlight: #35226B;
}