/* ============================================================ CabiAI Redesign — Design Tokens "Precision Light" — מערכת עיצוב מודרנית למקצוענים מקור: Anthropic Design Studio handoff (2026-05) ============================================================ */ /* הפונטים נטענים בצורה לא-חוסמת-רינדור ישירות מ- ב-index.html (rel=stylesheet media=print onload). @import כאן גרם לשרשור בקשות (tokens.css → גילוי @import → הורדת הפונט) שעיכב את הציור הראשון. */ :root { /* ─── Surface (Light, slightly cool neutral) ─── */ --surface-0: #FFFFFF; /* deepest white */ --surface-1: #FBFBFD; /* page bg */ --surface-2: #F4F5F8; /* secondary surface */ --surface-3: #ECEEF2; /* hover / disabled */ --surface-4: #E2E5EB; /* borders strong */ /* ─── Ink (text & strokes) ─── */ --ink-1: #0A0B0D; /* primary text — near black */ --ink-2: #2C2F36; /* secondary text */ --ink-3: #6B6F78; /* tertiary / labels */ --ink-4: #9CA0AB; /* placeholder */ --ink-5: #C7CAD1; /* disabled */ --stroke: rgba(10, 11, 13, 0.08); --stroke-strong: rgba(10, 11, 13, 0.14); /* ─── Accent: "Machined Copper" — ייחודי לעולם הנגרות+CNC ─── */ /* a11y: --accent חייב להעניק יחס ניגודיות ≥4.5:1 על לבן (WCAG 2.1 AA) — כאשר טקסט לבן יושב על רקע אקצנט (mab__btn, mt-btn--next וכד'). */ --accent: oklch(58% 0.17 42); /* כתום-נחושת — מכוון 4.5:1+ על לבן */ --accent-hover: oklch(52% 0.17 42); --accent-soft: oklch(94% 0.04 50); /* רקע כפתור משני (טקסט --accent-ink) */ --accent-ink: oklch(35% 0.10 40); /* טקסט באקצנט (על רקע --accent-soft) */ /* ─── State colors (low chroma, harmonious) ─── */ --ok: oklch(60% 0.12 155); --ok-soft: oklch(95% 0.03 155); --warn: oklch(72% 0.14 80); --warn-soft: oklch(96% 0.04 80); --err: oklch(58% 0.18 25); --err-soft: oklch(95% 0.04 25); --info: oklch(60% 0.12 240); --info-soft: oklch(95% 0.03 240); /* ─── Type ─── */ --font-ui: 'Heebo', 'Inter', -apple-system, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* גדלי הטקסט הוגדלו ב-22% (גורף, ע"י scripts/scale-new-fontsize.js + עדכון ידני כאן). הערכים בהערות = הגודל המקורי לפני ההגדלה, לשחזור קל. */ --t-display: clamp(3.05rem, 6.1vw, 4.88rem); /* was 2.5/5vw/4rem — 40-64 */ --t-h1: clamp(2.44rem, 3.66vw, 3.36rem); /* was 2/3vw/2.75rem — 32-44 */ --t-h2: 1.98rem; /* was 1.625rem — 26 */ --t-h3: 1.53rem; /* was 1.25rem — 20 */ --t-h4: 1.22rem; /* was 1rem — 16 */ --t-body: 1.14rem; /* was 0.9375rem — 15 */ --t-small: 0.99rem; /* was 0.8125rem — 13 */ --t-micro: 0.84rem; /* was 0.6875rem — 11 */ /* ─── Spacing (4pt scale) ─── */ --s-0: 0; --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; --s-10: 80px; --s-11: 120px; /* ─── Radii ─── */ --r-1: 4px; --r-2: 6px; --r-3: 8px; --r-4: 12px; --r-5: 16px; --r-6: 22px; --r-pill: 999px; /* ─── Shadows (low z, more like paper) ─── */ --sh-0: 0 1px 0 var(--stroke); --sh-1: 0 1px 2px rgba(10,11,13,0.04), 0 1px 3px rgba(10,11,13,0.06); --sh-2: 0 2px 6px rgba(10,11,13,0.06), 0 4px 12px rgba(10,11,13,0.05); --sh-3: 0 8px 24px rgba(10,11,13,0.08), 0 2px 6px rgba(10,11,13,0.04); --sh-4: 0 24px 48px rgba(10,11,13,0.12), 0 4px 12px rgba(10,11,13,0.06); --sh-focus: 0 0 0 3px oklch(70% 0.16 45 / 0.25); /* ─── Motion ─── */ --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 150ms; --t-base: 220ms; --t-slow: 400ms; /* ─── Mobile / Touch ─── */ --touch-min: 44px; --mobile-padding: 16px; --mobile-radius: 12px; --mobile-header-h: 52px; --mobile-bottom-bar-h: 56px; --mobile-safe-bottom: env(safe-area-inset-bottom, 0px); --mobile-safe-top: env(safe-area-inset-top, 0px); }