/* ═══════════════════════════════════════════════════════════════════════ WizBI Design System — canonical tokens · v1.1 שלוש שכבות. זו כל התשובה לניהול ותחזוקה מרוכזת: TIER 1 PRIMITIVES --p-* סקאלות גולמיות. אף קומפוננטה לא נוגעת בהן. TIER 2 SEMANTIC --brand, --bg, --text … מה שהמערכת "מתכוונת" אליו. TIER 3 COMPONENT --ctl-h, --card-r … מה שקומפוננטה צורכת. קומפוננטה קוראת רק Tier 3 (ובמקרה הצורך Tier 2). אף פעם לא Tier 1, ולעולם לא ערך קשיח. משנים משהו במקום אחד — הוא זז בכל המוצרים. ── מיתוג מוצר = משתנה אחד ── `--brand` בלבד. hover, טינטים, טבעת פוקוס וגוונים נגזרים ב-color-mix. ראה בלוק PRODUCT בסוף הקובץ. ── מה השתנה מ-v1.0, ולמה ── רדיוסים ירדו (16→10 בכרטיס), הצללים כמעט נעלמו לטובת גבולות, והגרדיאנט ירד מהיררכיית ה-CTA. שלושת אלה יחד הם ההבדל בין "מוקאפ" ל"מוצר". ══════════════════════════════════════════════════════════════════════ */ /* ═══ TIER 1 — PRIMITIVES ══════════════════════════════════════════════ סקאלות גולמיות בלבד. אין להן משמעות, רק ערך. */ :root { /* כחול */ --p-blue-50:#eff6ff; --p-blue-100:#dbeafe; --p-blue-200:#bfdbfe; --p-blue-300:#93c5fd; --p-blue-400:#60a5fa; --p-blue-500:#3b82f6; --p-blue-600:#2563eb; --p-blue-700:#1d4ed8; --p-blue-800:#1e40af; --p-blue-900:#1e3a8a; --p-blue-950:#172554; /* ניטרלי — נייבי מרומז, לא אפור מת ולא כחול-AI */ --p-n-0:#ffffff; --p-n-25:#fafbfc; --p-n-50:#f4f6f9; --p-n-100:#eaedf3; --p-n-200:#dee2ea; --p-n-300:#c4cad6; --p-n-400:#959daf; --p-n-450:#767f92; --p-n-500:#6c7589; --p-n-600:#4d5670; --p-n-700:#343d54; --p-n-800:#1f2739; --p-n-850:#18202f; --p-n-900:#111827; --p-n-950:#0b111d; --p-n-1000:#070b14; /* סמנטי גולמי */ --p-green-600:#0f7a4d; --p-green-400:#34d399; --p-amber-600:#b45309; --p-amber-400:#fbbf24; --p-red-600:#dc2626; --p-red-400:#f87171; /* סדרות גרפים */ --p-c2:#0891b2; --p-c3:#7c3aed; --p-c4:#d97706; --p-c5:#059669; --p-c6:#db2777; --p-c7:#64748b; --p-c8:#0d9488; } /* ═══ TIER 2 — SEMANTIC · בהיר ═════════════════════════════════════════ */ :root { /* מותג — דרוס את --brand בלבד; כל השאר נגזר */ --brand: var(--p-blue-600); --brand-fg: #ffffff; --brand-2: color-mix(in srgb, var(--brand) 82%, var(--p-n-1000)); /* hover */ --brand-soft: color-mix(in srgb, var(--brand) 10%, transparent); --brand-line: color-mix(in srgb, var(--brand) 32%, transparent); --accent: var(--brand); --accent-fg: var(--brand-fg); --accent-soft:color-mix(in srgb, var(--accent) 12%, transparent); /* משטחים */ --bg: var(--p-n-50); --bg-elev: var(--p-n-0); --bg-card: var(--p-n-0); --bg-soft: var(--p-n-100); --bg-hover: var(--p-n-100); --line: var(--p-n-200); --line-soft:var(--p-n-100); /* טקסט */ --text: var(--p-n-900); --text-soft:var(--p-n-600); --text-mut: var(--p-n-500); --text-on-dark: var(--p-n-100); /* סמנטי */ /* סמנטי — עצמאי מהמותג בכוונה. אם --info היה נגזר מ---brand, מוצר ירוק (WizBill) היה מקבל "מידע" ירוק שמתנגש ב---ok, ומוצר סגול (WizSEO) היה מקבל "מידע" סגול. משמעות לא משתנה לפי מיתוג. */ --ok: var(--p-green-600); --ok-soft: color-mix(in srgb, var(--ok) 12%, transparent); --warn:var(--p-amber-600); --warn-soft:color-mix(in srgb, var(--warn) 12%, transparent); --bad: var(--p-red-600); --bad-soft: color-mix(in srgb, var(--bad) 12%, transparent); --info:var(--p-blue-600); --info-soft:color-mix(in srgb, var(--info) 12%, transparent); /* גובה — קמצני בכוונה. צל = דבר שמרחף באמת. כרטיס לא מרחף. */ --shadow-xs: 0 1px 1px rgba(11,17,29,.04); --shadow-sm: 0 1px 2px rgba(11,17,29,.07); --shadow-md: 0 4px 12px rgba(11,17,29,.09), 0 1px 2px rgba(11,17,29,.05); --shadow-lg: 0 12px 32px rgba(11,17,29,.13), 0 2px 6px rgba(11,17,29,.05); /* סדרות גרפים */ --c1:var(--brand); --c2:var(--p-c2); --c3:var(--p-c3); --c4:var(--p-c4); --c5:var(--p-c5); --c6:var(--p-c6); --c7:var(--p-c7); --c8:var(--p-c8); } /* ═══ TIER 2 — SEMANTIC · כהה ══════════════════════════════════════════ */ [data-theme="dark"], .dark { --brand: var(--p-blue-500); --brand-2: color-mix(in srgb, var(--brand) 80%, #ffffff); /* בכהה hover מבהיר */ --brand-soft: color-mix(in srgb, var(--brand) 18%, transparent); --brand-line: color-mix(in srgb, var(--brand) 40%, transparent); --bg: var(--p-n-1000); --bg-elev: var(--p-n-950); --bg-card: var(--p-n-950); --bg-soft: var(--p-n-900); --bg-hover: var(--p-n-850); --line: var(--p-n-800); --line-soft:var(--p-n-900); --text: var(--p-n-50); --text-soft:var(--p-n-400); --text-mut: var(--p-n-450); /* לא -500: על רקע כהה הוא נופל מתחת ל-4.5:1 */ --ok: var(--p-green-400); --ok-soft: color-mix(in srgb, var(--ok) 16%, transparent); --warn:var(--p-amber-400); --warn-soft:color-mix(in srgb, var(--warn) 16%, transparent); --bad: var(--p-red-400); --bad-soft: color-mix(in srgb, var(--bad) 16%, transparent); --info:var(--p-blue-400); --info-soft:color-mix(in srgb, var(--info) 16%, transparent); --shadow-xs: 0 1px 1px rgba(0,0,0,.30); --shadow-sm: 0 1px 2px rgba(0,0,0,.40); --shadow-md: 0 4px 12px rgba(0,0,0,.50), 0 1px 2px rgba(0,0,0,.35); --shadow-lg: 0 12px 32px rgba(0,0,0,.60), 0 2px 6px rgba(0,0,0,.35); --c2:#22d3ee; --c3:#a78bfa; --c4:#fbbf24; --c5:#34d399; --c6:#f472b6; --c7:#94a3b8; --c8:#2dd4bf; } /* ═══ TIER 3 — COMPONENT ═══════════════════════════════════════════════ מה שקומפוננטות צורכות. רוצה כפתורים נמוכים יותר בכל WizBI? שורה אחת. */ :root { /* טיפוגרפיה — Hebrew-first. Space Grotesk חסר גליפים עבריים ולכן כותרת עברית נופלת ל-Heebo אוטומטית. זו ההתנהגות הרצויה. */ --font-ui: 'Heebo', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Space Grotesk', 'Heebo', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --t-xs:0.75rem; --t-sm:0.8125rem; --t-base:0.875rem; --t-md:1rem; --t-lg:1.0625rem; --t-xl:1.25rem; --t-2xl:1.5rem; --t-3xl:2rem; --t-display:2.75rem; --lh-tight:1.15; /* כותרות */ --lh-ui:1.5; /* ממשק, טבלאות, ניווט */ --lh-body:1.65; /* פסקאות רצות בעברית */ --fw-normal:400; --fw-medium:500; --fw-semi:600; --fw-bold:700; --fw-black:800; /* צורה — נמוך בכוונה. 16px+ בכרטיס קורא "תבנית נחיתה", 10px קורא "תוכנה". */ --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-full:999px; /* מרווח — בסיס 4 */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-14:56px; --s-20:80px; /* פקדים */ --ctl-h-sm:30px; --ctl-h:36px; --ctl-h-lg:44px; --ctl-r:var(--r-sm); --ctl-px:var(--s-4); --ctl-fs:var(--t-base); --ctl-fw:var(--fw-semi); --ctl-bg:var(--bg-card); --ctl-line:var(--line); /* כרטיס — גבול, לא צל. זה הכלל שהכי משנה את המראה. */ --card-bg:var(--bg-card); --card-line:var(--line); --card-r:var(--r-lg); --card-pad:var(--s-5); --card-shadow:none; /* משטחים צפים — כאן הצל לגיטימי */ --pop-r:var(--r-md); --pop-shadow:var(--shadow-md); --modal-r:var(--r-xl); --modal-shadow:var(--shadow-lg); --scrim:rgba(11,17,29,.55); /* טבלה */ --tbl-fs:var(--t-sm); --tbl-pad-x:var(--s-4); --tbl-pad-y:10px; --tbl-head-bg:var(--bg-soft); --tbl-head-fs:var(--t-xs); /* ניווט — הסרגל נייבי בשתי הערכות. חתימה, לא באג. */ --nav-bg:var(--p-n-1000); --nav-text:var(--p-n-300); --nav-text-soft:var(--p-n-500); --nav-line:rgba(255,255,255,.07); --nav-active-bg:color-mix(in srgb, var(--p-blue-500) 18%, transparent); --nav-active-text:var(--p-blue-200); --nav-item-r:var(--r-sm); --sidebar-w:236px; --sidebar-w-collapsed:56px; --topbar-h:52px; /* פוקוס · תנועה · שכבות */ --focus-ring:0 0 0 3px var(--brand-soft), 0 0 0 1px var(--brand); --ease:180ms cubic-bezier(.4,0,.2,1); --ease-fast:110ms cubic-bezier(.4,0,.2,1); --z-sticky:30; --z-nav:40; --z-scrim:50; --z-modal:60; --z-toast:70; --z-tip:80; /* רוחב תוכן */ --w-prose:66ch; --w-page:1200px; --w-narrow:960px; /* גרדיאנט — סימן המותג בלבד. לא לכפתור, לא לכותרת, לא לרקע hero. אם צריך CTA בולט: --brand מלא. גרדיאנט על טקסט הוא הקלישאה הכי מזוהה. */ --grad:linear-gradient(135deg, var(--p-blue-600), var(--p-blue-900)); } /* ═══ BASE ══════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-ui); font-size:var(--t-base); line-height:var(--lh-ui); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--lh-tight);letter-spacing:-.018em;color:var(--text);margin:0} h1{font-size:var(--t-2xl);font-weight:var(--fw-bold)} h2{font-size:var(--t-xl);font-weight:var(--fw-semi)} h3{font-size:var(--t-lg);font-weight:var(--fw-semi)} h4{font-size:var(--t-md);font-weight:var(--fw-semi)} p{margin:0;line-height:var(--lh-body)} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:3px} code,kbd,pre,samp{font-family:var(--font-mono);font-size:.92em} :focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-sm)} ::selection{background:var(--brand-soft);color:var(--text)} /* מספרים, מטבע, תאריכים, מזהים, קוד — LTR גם בתוך פסקה עברית. בלי זה ‎₪1,234.50 מתרנדר 50.1,234₪. */ .ltr,[data-ltr]{direction:ltr;unicode-bidi:isolate;display:inline-block} .tnum{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1} /* אייקון כיווני — מתהפך ב-RTL. שעון, מדיה ו-✓ לא. */ [dir="rtl"] .icon-flip{transform:scaleX(-1)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ═══ PRODUCT REGISTRY ═════════════════════════════════════════════════ רישום המוצרים — כללים חיים, לא הערה. מוצר מצהיר על עצמו ב-HTML: וזהו. אין לו קובץ צבעים משלו ואין מה לתחזק בצד שלו. לשנות את הצבע של WizBid = לשנות שורה אחת כאן, במקום אחד, לכל הצי. hover, טינטים, טבעת פוקוס, גבול המותג וסדרת --c1 בגרפים — כולם נגזרים מ---brand ב-color-mix. אל תדרוס אותם. מוצרים שלא מופיעים כאן (wizbi.ai · Analyst · Accounts · Ops · Studio · WizClip) רצים על צבע הליבה. זו ברירת המחדל, לא השמטה. ── למה יש גם --primary כשלשת HSL ── shadcn/ui לא צורך צבע אלא שלשת HSL (`hsl(var(--primary))`), ואי אפשר לגזור אותה מ---brand ב-CSS. בלי השורה הזו כל