/* ═══════════════════════════════════════════════════════════════ * LeadMachine · Design Tokens v0.9 * CSS Variables — Light (default) + Dark themes * Inter Variable · 1px borders · functional color only * ═══════════════════════════════════════════════════════════════ */ :root { /* ─── COLOR · NEUTRAL SURFACES ─────────────────────────── */ --bg-app: #ffffff; /* page background */ --bg-subtle: #fafafa; /* sidebar, table headers */ --bg-muted: #f5f5f5; /* inert fills, chart gutters */ --bg-card: #ffffff; /* card surface */ --bg-hover: #f7f7f6; /* row / button hover */ --bg-active: #f0f0ee; /* selected nav, pressed */ --bg-overlay: rgba(15, 15, 15, 0.35); /* modal scrim */ /* ─── COLOR · TEXT ─────────────────────────────────────── */ --fg: #0a0a0a; /* primary */ --fg-2: #525252; /* secondary */ --fg-3: #a3a3a3; /* tertiary, placeholders */ --fg-inv: #ffffff; /* on dark / brand */ /* ─── COLOR · BORDERS ──────────────────────────────────── */ --border: #e8e8e6; /* default 1px */ --border-strong: #d4d4d2; /* emphasized */ --border-focus: #16a34a; /* input :focus ring color */ /* ─── COLOR · FUNCTIONAL ───────────────────────────────── */ /* Brand · success */ --brand: #16a34a; --brand-hover: #128a3e; --brand-soft: #ecfdf5; --brand-soft-fg: #15803d; /* Info · new */ --info: #2563eb; --info-hover: #1d4ed8; --info-soft: #eff6ff; --info-fg: #1d4ed8; /* Warning · pending */ --warn: #d97706; --warn-hover: #b45309; --warn-soft: #fef3c7; --warn-fg: #b45309; /* Danger · error */ --danger: #dc2626; --danger-hover: #b91c1c; --danger-soft: #fef2f2; --danger-fg: #b91c1c; /* Neutral · informational */ --neutral-soft: #f5f5f4; --neutral-fg: #525252; /* ─── COLOR · DOMAIN-SPECIFIC ──────────────────────────── */ /* Star ratings */ --star: #f5b81a; --star-off: #e7e5e2; /* Channel brand dots */ --src-avito: #97c93c; --src-direct: #ffcc00; --src-tilda: #ffae42; --src-telegram: #229ed9; /* Chart palette · use in order, never beyond 5 */ --c-1: #16a34a; --c-2: #2563eb; --c-3: #d97706; --c-4: #db2777; --c-5: #7c3aed; /* ─── TYPOGRAPHY ───────────────────────────────────────── */ --font-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace; /* Sizes · 8-step ramp */ --t-11: 11px; /* uppercase labels, tiny meta */ --t-12: 12px; /* captions, dense tables */ --t-13: 13px; /* default UI body */ --t-14: 14px; /* card titles, buttons */ --t-15: 15px; /* chat / review body */ --t-18: 18px; /* h2, section header */ --t-24: 24px; /* h1 page title */ --t-36: 36px; /* KPI display number */ /* Line height */ --lh-tight: 1.1; /* large headings */ --lh-snug: 1.3; /* h2 */ --lh-normal: 1.45; /* UI body */ --lh-relaxed: 1.5; /* long-form, chats, reviews */ /* Weight */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Letter-spacing */ --tracking-tight: -0.02em; /* large display */ --tracking-snug: -0.015em; /* h1 */ --tracking-body: -0.005em; /* UI default */ --tracking-wide: 0.06em; /* uppercase labels */ /* ─── SPACING · 4-pt scale ─────────────────────────────── */ --s-0: 0; --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 10px; --s-6: 12px; /* card padding (compact) */ --s-7: 14px; --s-8: 16px; /* card padding (default) */ --s-10: 20px; /* card padding (roomy) */ --s-12: 24px; /* page gutter */ --s-16: 32px; --s-20: 40px; --s-24: 48px; --s-32: 64px; /* ─── RADIUS ───────────────────────────────────────────── */ --r-xs: 4px; /* badges, micro-tags */ --r-sm: 6px; /* buttons, inputs */ --r-md: 8px; /* cards */ --r-lg: 12px; /* modals, popovers */ --r-pill: 999px; /* avatars, chips, dots */ /* ─── SHADOW · overlays only ───────────────────────────── */ /* Cards have no shadow — only borders. */ --shadow-popover: 0 2px 4px rgba(15, 15, 15, 0.04), 0 8px 24px rgba(15, 15, 15, 0.08); --shadow-modal: 0 4px 8px rgba(15, 15, 15, 0.04), 0 24px 64px rgba(15, 15, 15, 0.16); --shadow-tooltip: 0 2px 8px rgba(15, 15, 15, 0.12); /* ─── MOTION ───────────────────────────────────────────── */ --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; /* hover, button press */ --dur-base: 180ms; /* tab switch, drawer fade */ --dur-slow: 320ms; /* drawer slide */ /* ─── LAYOUT ───────────────────────────────────────────── */ --sidebar-w: 220px; --topbar-h: 48px; --drawer-w: 460px; --chat-list-w: 320px; --modal-w-sm: 420px; --modal-w-md: 580px; /* command palette */ --modal-w-lg: 720px; --row-h-compact: 32px; /* dense tables */ --row-h: 40px; /* default table */ --row-h-roomy: 56px; /* chat list, leads */ /* ─── Z-INDEX ──────────────────────────────────────────── */ --z-base: 0; --z-sticky: 10; /* sticky table headers */ --z-dropdown: 50; --z-drawer: 60; --z-modal: 70; --z-toast: 80; --z-tooltip: 90; /* ─── FOCUS RING ───────────────────────────────────────── */ --focus-ring: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent); } /* ═══════════════════════════════════════════════════════════════ * DARK THEME · override on [data-theme="dark"] scope * ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Surfaces */ --bg-app: #0a0a0a; --bg-subtle: #111111; --bg-muted: #161616; --bg-card: #111111; --bg-hover: #1a1a1a; --bg-active: #222222; --bg-overlay: rgba(0, 0, 0, 0.6); /* Text */ --fg: #fafafa; --fg-2: #a3a3a3; --fg-3: #6b6b6b; --fg-inv: #0a0a0a; /* Borders */ --border: #232323; --border-strong: #333333; --border-focus: #22c55e; /* Brand */ --brand: #22c55e; --brand-hover: #16a34a; --brand-soft: #052e1a; --brand-soft-fg: #4ade80; /* Info */ --info: #3b82f6; --info-hover: #2563eb; --info-soft: #0b1d3a; --info-fg: #93c5fd; /* Warn */ --warn: #f59e0b; --warn-hover: #d97706; --warn-soft: #2a1a04; --warn-fg: #fbbf24; /* Danger */ --danger: #ef4444; --danger-hover: #dc2626; --danger-soft: #2a0e0e; --danger-fg: #fca5a5; /* Neutral */ --neutral-soft: #1c1c1c; --neutral-fg: #a3a3a3; /* Domain */ --star-off: #2a2a2a; /* Overlays */ --shadow-popover: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-modal: 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.6); --shadow-tooltip: 0 2px 8px rgba(0, 0, 0, 0.5); --focus-ring: 0 0 0 3px color-mix(in oklab, var(--brand) 25%, transparent); } /* ═══════════════════════════════════════════════════════════════ * BASE * ═══════════════════════════════════════════════════════════════ */ html, body { font-family: var(--font-sans); font-size: var(--t-13); line-height: var(--lh-normal); letter-spacing: var(--tracking-body); color: var(--fg); background: var(--bg-app); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* tabular numbers helper — apply to any element with numbers */ .num, [class*="num-"], [data-num] { font-variant-numeric: tabular-nums; }