/* ============================================================
   ArcHub — טוקני עיצוב. מצב יום ומצב לילה.
   כל צבע במערכת מוגדר כאן ורק כאן.
============================================================ */
/* ------------------------------------------------------------------
   גובה הכותרת הקבועה, כמשתנים.
   שלושה רכיבים יושבים זה מעל זה בראש המסך: רצועת המשרד (רק למנהל
   אפליקציה), הסרגל העליון, ורצועת הנתיב. כל מסך צריך ריפוד עליון בגובה
   הסכום שלהם. חישוב דרך משתנים במקום מספרים קשיחים מונע את המצב שבו
   הוספת רצועה דורשת לתקן שישה מקומות נפרדים — וזה בדיוק מה שקרה קודם.
------------------------------------------------------------------ */
:root{
  --banner-h:0px;
  --appbar-h:66px;
  --crumb-h:0px;
  --header-h:calc(var(--banner-h) + var(--appbar-h) + var(--crumb-h));

  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --radius-xs:5px;     /* רכיבים זעירים: כפתורי אייקון עד 24px, קוביות הלוח, שדות קטנים */
  --font-ui:'Rubik',system-ui,'Segoe UI',Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Courier New',monospace;

  /* ----------------------------------------------------------------
     סולם טיפוגרפי. כל גודל, משקל, גובה שורה ומרווח תווים במערכת
     נלקח מכאן ורק מכאן — לא כותבים ערך מספרי ישירות ברכיב.
     השמות לפי תפקיד, לא לפי מספר: בוחרים לפי מה שהטקסט עושה במסך.
  ---------------------------------------------------------------- */
  --fs-display:24px;   /* כותרת מסך ראשית */
  --fs-title:20px;     /* כותרת משנית: כניסה, לוגו */
  --fs-heading:15px;   /* כותרת כרטיס, חלון, שורה ברשימה; כפתור ראשי */
  --fs-body:13px;      /* ברירת המחדל: גוף, שדות, כפתורים, טבלאות */
  --fs-small:12px;     /* טקסט משני: תיאור, מטא, תווית שדה */
  --fs-caption:11px;   /* תגיות, מונים, כותרות עמודה, הערות */

  --fw-regular:400;    /* גוף וטקסט משני */
  --fw-medium:600;     /* תוויות והדגשה בתוך טקסט */
  --fw-bold:700;       /* כותרות וכפתורים בלבד */

  --lh-tight:1.3;      /* כותרות */
  --lh-normal:1.5;     /* ממשק */
  --lh-relaxed:1.7;    /* פסקאות קריאה */

  --ls-tight:-.01em;   /* רק ב-display */
  --ls-normal:0;
  --ls-wide:.04em;     /* רק כותרות עמודה ותוויות קטנות */

  /* תנועה של רכיב שנכנס למסך ויוצא ממנו (הודעה צפה). היציאה קצרה מהכניסה:
     מה שנעלם לא צריך להחזיק את העין. */
  --dur-enter:.32s;
  --dur-exit:.24s;
  --ease-enter:cubic-bezier(.2,.8,.2,1);   /* מאט לקראת הסוף — הרכיב "נוחת" */
  --ease-exit:cubic-bezier(.4,0,1,1);      /* מאיץ לקראת הסוף — הרכיב "עוזב" */
  --slide-dist:18px;                       /* המרחק שהרכיב מחליק */
  /* תפריט מחליק חצי מהמרחק. שלילי = נפתח כלפי מטה (ברירת המחדל);
     תפריט שנפתח כלפי מעלה הופך את הסימן אצלו. */
  --menu-shift:calc(var(--slide-dist) / -2);

  /* צבעים שאינם תלויים בערכת הנושא: טקסט שיושב על משטח צבוע נשאר זהה
     ביום ובלילה, כי המשטח עצמו לא מתחלף */
  --on-accent:#fff;        /* טקסט ואייקון על רקע מודגש: accent, אדום, זהב */
  --logo-plate:#fff;       /* לוחית בהירה מאחורי לוגו משרד, זהה ביום ובלילה */
  /* סימון על תמונת פיקוח: הצבעים נצרבים בתמונה ולכן זהים ביום ובלילה. העורך
     (photo-markup.js) קורא אותם מכאן, והם גם צבעי הכפתורים שבוחרים בהם. ההילה
     מקיפה כל סימון כדי שייראה גם על רקע באותו צבע. */
  --mark-red:#e5231b;
  --mark-yellow:#ffd60a;
  --mark-white:#ffffff;
  --mark-halo-light:#ffffff;   /* סביב אדום */
  --mark-halo-dark:#1b1b1b;    /* סביב צהוב ולבן */
  --on-accent-faint:rgba(255,255,255,.45);  /* חלק כבוי של ספינר על רקע מודגש */
  --on-accent-soft:rgba(255,255,255,.2);    /* רקע כפתור שקוף על רצועה צבעונית */
  --on-accent-soft-hover:rgba(255,255,255,.32);
  --scrim:rgba(10,10,20,.42);               /* המסך הכהה מאחורי חלון */
  --shadow-soft:rgba(0,0,0,.25);            /* צל קטן מתחת לרכיב בודד: ידית מתג, רצועה, תגית */
  --login-glow:rgba(80,60,200,.35);         /* ההילה מתחת לקוביית הכניסה */
  --on-gold:#2b2005;       /* טקסט על רקע זהב בהיר */
  --ink:#1c1e2c;           /* טקסט על משטח פסטל בהיר (קובייה צבועה, שורת טבלה צבועה) */
  --ink-soft:#3a3d52;
  --ink-faint:#5b5e74;
  --ink-accent:#4C3FC7;
  --ink-red:#B3311D;
  --ink-line:rgba(28,30,44,.22);

  /* הדפסה — נקודות, לא פיקסלים */
  --fs-print-title:16pt;
  --fs-print-body:11pt;
  --fs-print-small:9.5pt;
  --fs-print-caption:8pt;
}
html[data-theme="light"]{
  color-scheme:light;
  --bg-1:#eef1fb;
  --blob-a:#a9c9ff; --blob-b:#f3c6ee; --blob-c:#b9f3dc; --blob-d:#ffe2b0;
  --text:#1c1e2c;
  --text-soft:#4c4f66;
  --text-faint:#7d7f95;
  --glass-bg:rgba(255,255,255,.52);
  --glass-bg-strong:rgba(255,255,255,.72);
  --wb-node-bg:rgba(255,255,255,.72);   /* קובייה בלוח כשצבעי הפונקציות כבויים */
  --glass-border:rgba(255,255,255,.75);
  --glass-shadow:0 8px 32px rgba(60,66,110,.16), 0 2px 8px rgba(60,66,110,.08);
  --glass-shadow-lg:0 24px 64px rgba(60,66,110,.24), 0 8px 20px rgba(60,66,110,.12);
  --accent:#6C5CE7;
  --accent-2:#4C3FC7;
  --accent-soft:rgba(108,92,231,.15);
  --gold:#B5862B;
  --gold-soft:rgba(181,134,43,.16);
  --gold-deep:#8a6620;       /* קצה כהה במעבר צבע זהוב */
  --on-gold-grad:#fff;       /* טקסט ואייקון על מעבר הצבע הזהוב */
  --green:#1F8A5A;
  --green-soft:rgba(31,138,90,.16);
  --red:#C6402B;
  --red-soft:rgba(198,64,43,.14);
  /* גוונים נוספים לסימון קטגוריות (צבעי שלבי התכנון) */
  --blue:#2F6FD6;   --blue-soft:rgba(47,111,214,.15);
  --teal:#0E8C8C;   --teal-soft:rgba(14,140,140,.15);
  --orange:#C8661A; --orange-soft:rgba(200,102,26,.15);
  --pink:#C2408A;   --pink-soft:rgba(194,64,138,.14);
  --input-bg:rgba(255,255,255,.55);
  --track:rgba(120,120,150,.18);
  --menu-bg:rgba(255,255,255,.94);
  --select-bg:#ffffff;       /* רקע אטום לרשימה הנפתחת של select */
  --dot-color:rgba(30,32,60,.16);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg-1:#0d0f1c;
  --blob-a:#3a2e78; --blob-b:#2c1f4a; --blob-c:#123a4a; --blob-d:#1a2a55;
  --text:#eef0fb;
  --text-soft:#c2c4de;
  --text-faint:#8f92b3;
  --glass-bg:rgba(30,32,52,.48);
  --glass-bg-strong:rgba(34,36,58,.68);
  --wb-node-bg:#c6c9d6;      /* אפור עדין ואטום: משטח בהיר כמו קובייה צבועה, והטקסט שעליו כהה (--ink) */
  --glass-border:rgba(255,255,255,.10);
  --glass-shadow:0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  --glass-shadow-lg:0 24px 70px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.35);
  --accent:#9C8CFF;
  --accent-2:#7A6BEA;
  --accent-soft:rgba(156,140,255,.20);
  --gold:#E4B85C;
  --gold-soft:rgba(228,184,92,.16);
  --gold-deep:#C99A3E;       /* בלילה הזהב בהיר, ולכן גם הקצה שלו בהיר והטקסט שעליו כהה */
  --on-gold-grad:#2b2005;
  --green:#4FD397;
  --green-soft:rgba(79,211,151,.15);
  --red:#F17A63;
  --red-soft:rgba(241,122,99,.16);
  --blue:#6FA8FF;   --blue-soft:rgba(111,168,255,.18);
  --teal:#4FD1C5;   --teal-soft:rgba(79,209,197,.16);
  --orange:#F5A25D; --orange-soft:rgba(245,162,93,.17);
  --pink:#F288C2;   --pink-soft:rgba(242,136,194,.17);
  --input-bg:rgba(255,255,255,.06);
  --track:rgba(255,255,255,.12);
  --menu-bg:rgba(18,19,32,.94);
  --select-bg:#1b1d30;
  --dot-color:rgba(255,255,255,.10);
}

/* מי שביקש ממערכת ההפעלה לצמצם אנימציות — מקבל ממשק שקט */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}