/* ============================================================================
   FADEZEN · Design Tokens
   שכבה יחידה של אמת לצבע, מרווח, טיפוגרפיה, הצללה ותנועה.
   כל שאר קבצי ה-CSS צורכים מכאן בלבד — אין ערכים קשיחים במקומות אחרים.
   ========================================================================= */

:root{
  /* ---------- Canvas & surfaces ------------------------------------------ */
  --c-void:        #08090B;   /* מתחת לכל דבר */
  --c-bg:          #121212;   /* קנבס המפה */
  --c-surface-1:   #17181C;
  --c-surface-2:   #1D1F24;
  --c-surface-3:   #24272D;

  /* זכוכית — שכבות שקופות מעל המפה */
  --glass-1:       rgba(23,24,28,.72);
  --glass-2:       rgba(27,29,34,.86);
  --glass-3:       rgba(18,19,22,.94);
  --glass-blur:    blur(20px) saturate(165%);
  --glass-blur-sm: blur(10px) saturate(140%);

  /* ---------- Lines ------------------------------------------------------- */
  --line:          rgba(255,255,255,.085);
  --line-strong:   rgba(255,255,255,.16);
  --line-faint:    rgba(255,255,255,.05);

  /* ---------- Brand & status --------------------------------------------- */
  --live:          #00E676;   /* פנוי עכשיו */
  --live-dim:      rgba(0,230,118,.16);
  --live-ink:      #8CF7C0;
  --live-deep:     #00B85E;

  --nav:           #00E5FF;   /* ניווט / פעולה ראשית */
  --nav-dim:       rgba(0,229,255,.14);
  --nav-ink:       #9DEEFF;
  --nav-deep:      #00B8D4;

  --busy:          #FF5252;   /* עמוס / סגור */
  --busy-dim:      rgba(255,82,82,.14);
  --busy-ink:      #FFB3B3;

  --gold:          #FFC246;   /* דירוגים */
  --gold-dim:      rgba(255,194,70,.14);
  --gold-ink:      #FFD98A;

  --violet:        #B388FF;   /* פרימיום / מודגש */
  --violet-dim:    rgba(179,136,255,.14);

  --grad-brand:    linear-gradient(96deg, var(--nav), var(--live));
  --grad-live:     linear-gradient(140deg, #00E676, #00A650);
  --grad-nav:      linear-gradient(140deg, #22ECFF, #00A9C4);

  /* ---------- Ink --------------------------------------------------------- */
  --ink-1:         #F4F5F7;
  --ink-2:         #A9AFB9;
  --ink-3:         #71787F;
  --ink-4:         #4C525A;
  --ink-on-live:   #04331B;
  --ink-on-nav:    #032830;

  /* ---------- Type -------------------------------------------------------- */
  --font-ui:    'Heebo', system-ui, -apple-system, 'Segoe UI', 'Noto Sans Hebrew', sans-serif;
  --font-display:'Rubik', var(--font-ui);
  --font-mono:  ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --t-2xs: 10px;
  --t-xs:  11.5px;
  --t-sm:  12.5px;
  --t-md:  14px;
  --t-lg:  15.5px;
  --t-xl:  17.5px;
  --t-2xl: 21px;
  --t-3xl: 26px;
  --t-4xl: 34px;

  --lh-tight: 1.18;
  --lh-snug:  1.32;
  --lh-body:  1.5;

  /* ---------- Space (4px grid) -------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

  /* ---------- Radius ------------------------------------------------------ */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 16px;
  --r-lg: 20px; --r-xl: 26px; --r-2xl: 32px; --r-pill: 999px;

  /* ---------- Elevation --------------------------------------------------- */
  --e-1: 0 2px 6px rgba(0,0,0,.32);
  --e-2: 0 8px 22px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.3);
  --e-3: 0 18px 44px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.4);
  --e-4: 0 -22px 64px rgba(0,0,0,.66), 0 -2px 10px rgba(0,0,0,.4);
  --e-glow-live: 0 0 0 1px rgba(0,230,118,.35), 0 10px 28px rgba(0,230,118,.28);
  --e-glow-nav:  0 0 0 1px rgba(0,229,255,.35), 0 10px 28px rgba(0,229,255,.26);

  /* ---------- Motion ------------------------------------------------------ */
  --ease-out:    cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  --d-1: .14s;  --d-2: .22s;  --d-3: .34s;  --d-4: .46s;  --d-5: .6s;

  /* ---------- Layers ------------------------------------------------------ */
  --z-map:      0;
  --z-route:    5;
  --z-rail:     40;
  --z-fab:      50;
  --z-topbar:   60;
  --z-scrim:    70;
  --z-sheet:    80;
  --z-chat:     90;
  --z-modal:    100;
  --z-lightbox: 110;
  --z-toast:    120;
  --z-splash:   130;

  /* ---------- Chrome / device -------------------------------------------- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --topbar-h:  152px;  /* גובה כולל של הסרגל העליון + צ'יפים + מונה */
  --rail-h:    150px;  /* גובה מסילת הכרטיסים התחתונה */
  /* אחוזים ולא svh: המדידה היא מול #app שכבר שווה בדיוק לחלון,
     ולכן היא נכונה בכל דפדפן במקום להישען על יחידת viewport דינמית. */
  --sheet-max: 88%;
  --panel-w:   436px;  /* רוחב הפאנל בדסקטופ */
}

/* מסכים גדולים — טיפוגרפיה נושמת קצת יותר */
@media (min-width: 900px){
  :root{
    --t-md: 14.5px; --t-lg: 16px; --t-xl: 18.5px;
    --t-2xl: 22px; --t-3xl: 28px; --t-4xl: 38px;
  }
}