/* ══════════════════════════════════════════ Postomat - מערכת עיצוב אחת (Design Tokens) מקור אמת יחיד לצבעים, מרווחים, טיפוגרפיה וצללים. נטען ב-landing / dashboard / admin כדי שכל המערכת תיראה כמוצר אחד. הערה חשובה על --accent: בעבר --accent היה סגול בדשבורד ושחור באדמין - אותו שם, משמעות הפוכה, ולכן המערכת נראתה כשני מוצרים. עכשיו: --accent = הסגול המותגי (צבע הלוגו) - כפתורים ראשיים, פריט ניווט פעיל --ink = שחור-כחלחל - טקסט ראשי וכותרות ══════════════════════════════════════════ */ :root{ /* ── רקעים ומשטחים ── */ --bg:#e8eafb; /* רקע האפליקציה - לבנדר */ --bg2:#eef1f8; --surface:#ffffff; /* כרטיסים */ --surface2:#f4f5fb; /* משטח משני / שדות */ --surface3:#eceef8; /* משטח שלישי / hover */ /* ── גבולות ── */ --border:rgba(20,20,43,0.07); --border2:rgba(20,20,43,0.13); /* ── מותג ── */ --accent:#6c5ce7; /* הסגול המותגי - פעולות ראשיות ומצב פעיל */ --accent2:#7c3aed; /* סגול עמוק יותר - גרדיאנטים */ --accent-soft:#a78bfa; /* סגול בהיר - הדגשות עדינות */ --accent-glow:rgba(108,92,231,0.15); --teal:#5bb8d4; /* הקצה הטורקיז של הלוגו - גרדיאנטים */ /* ── טקסט ── */ --ink:#14142b; /* טקסט ראשי וכותרות */ --text:#14142b; /* alias ל-ink לתאימות לאחור */ --muted:#5f5f7d; /* טקסט משני - היה #6b6b8a, נתן 4.30:1 על הרקע */ --muted2:#7a7a99; /* טקסט דהוי / placeholder - היה #b4b4c8, נתן 1.7:1 (בלתי קריא) */ /* ── סטטוס ── --X = הצבע ה"טהור" לאייקונים, פסים וגבולות (לא לטקסט קטן) --X-tint = רקע התג --X-fg = הטקסט שיושב על ה-tint. חייב להיות נפרד: ירוק/כתום טהורים על רקע בהיר נותנים 2.0-2.4:1 - בלתי קריא. הערכים נמדדו מול WCAG AA (4.5:1) על surface וגם על bg. */ --green:#10b981; --red:#ef4444; --amber:#f59e0b; --blue:#3b82f6; --green-tint:rgba(16,185,129,0.10); --green-fg:#065f46; --amber-tint:rgba(245,158,11,0.12); --amber-fg:#92400e; --red-tint:rgba(239,68,68,0.10); --red-fg:#b91c1c; --blue-tint:rgba(59,130,246,0.10); --blue-fg:#1d4ed8; --purple-tint:rgba(167,139,250,0.10);--purple-fg:#5b21b6; /* ── טיפוגרפיה ── */ --font:'Google Sans','Noto Sans Hebrew',sans-serif; --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:24px; /* ── מרווחים (spacing scale) ── */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; /* ── רדיוסים ── */ --r-sm:8px; --r:18px; --r-lg:22px; --r-pill:100px; /* ── צללים ── */ --shadow:0 1px 3px rgba(20,20,43,.05); --shadow-md:0 4px 16px rgba(20,20,43,.08); --shadow-lg:0 10px 34px rgba(20,20,43,.10); /* ── מבנה ── */ --sw:240px; /* רוחב סיידבר */ /* ── מעברים ── */ --t-fast:.13s ease; --t:.2s cubic-bezier(.4,0,.2,1); } /* ══ דארק מוד ══ מוחל דרך [data-theme="dark"] על . רוב הממשק משתמש ב-tokens, ולכן עקיפת ה-tokens כאן מהפכת את רובו אוטומטית. */ :root[data-theme="dark"]{ --bg:#0f0f1a; --bg2:#12121e; --surface:#1a1a2b; /* כרטיסים */ --surface2:#232338; /* משטח משני / שדות */ --surface3:#2c2c44; /* hover */ --border:rgba(255,255,255,0.08); --border2:rgba(255,255,255,0.14); --ink:#f0f0fa; /* טקסט ראשי (התהפך משחור ללבן) */ --text:#f0f0fa; --muted:#9a9ac0; --muted2:#9090b8; /* היה #6a6a90 - נתן 2.63:1 על surface3, מתחת לסף */ --accent:#7c6cff; /* סגול מעט בהיר יותר לניגודיות על כהה */ --accent2:#8b74ff; --accent-glow:rgba(124,108,255,0.22); --shadow:0 1px 3px rgba(0,0,0,.4); --shadow-md:0 4px 16px rgba(0,0,0,.45); --shadow-lg:0 12px 34px rgba(0,0,0,.55); --topbar-bg:rgba(15,15,26,.92); /* בכהה הכיוון מתהפך: הטקסט על ה-tint חייב להיות הגוון הבהיר. ה-tint מתחזק מעט כדי שהתג יישאר מובחן מהכרטיס. */ --green-tint:rgba(16,185,129,0.16); --green-fg:#6ee7b7; --amber-tint:rgba(245,158,11,0.16); --amber-fg:#fcd34d; --red-tint:rgba(239,68,68,0.16); --red-fg:#fca5a5; --blue-tint:rgba(59,130,246,0.16); --blue-fg:#93c5fd; --purple-tint:rgba(167,139,250,0.16);--purple-fg:#c4b5fd; } :root{ --topbar-bg:rgba(232,234,251,.92); } /* ══ Utility classes משותפות ══ מחליפות inline styles חוזרים. שימוש חוזר = שינוי במקום אחד. */ .u-muted{color:var(--muted)} .u-center{text-align:center} .u-hidden{display:none} .u-ltr{direction:ltr;text-align:left} .u-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* שתי עמודות שקורסות לאחת במובייל. קיים כמחלקה ולא כ-inline style, כי inline לא ניתן לדריסה ב-media query - וזו הייתה הסיבה שמסכים דו-עמודתיים נשארו דחוסים בטלפון. */ .split-2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:900px){.split-2{grid-template-columns:1fr}} /* ══ נגישות: focus ברור לכל אלמנט אינטראקטיבי ══ ללא :focus-visible ברור, ניווט מקלדת בלתי אפשרי. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; } /* ══ פס גלילה ══ ברירת המחדל של Windows מביאה רקע לבן וחצים, וזה בולט לרעה על רקע כהה. פס דק סגול בלבד, בלי מסילה ובלי חצים. */ *{scrollbar-width:thin;scrollbar-color:var(--accent) transparent} ::-webkit-scrollbar{width:8px;height:8px;background:transparent} ::-webkit-scrollbar-track{background:transparent;border:none;box-shadow:none} ::-webkit-scrollbar-thumb{background:var(--accent);border-radius:100px} ::-webkit-scrollbar-thumb:hover{background:var(--accent2)} /* חיוני: בלי זה כרום מציג את החצים בקצוות */ ::-webkit-scrollbar-button{display:none;width:0;height:0} ::-webkit-scrollbar-corner{background:transparent}