/* ============================================================ HATA CRM — Design tokens v2 (єдине джерело правди) Світла тема за замовчуванням (десктоп-first). Темна — через . ============================================================ */ :root { /* --- Фон і поверхні (світла) --- */ --bg-page: #f4f5f7; --bg-sidebar: #ffffff; --surface-1: #ffffff; --surface-2: #f1f5f9; --surface-3: #e8edf3; --line: #e5e9f0; --line-strong: #cbd5e1; /* --- Текст --- */ --text-strong: #0f172a; --text-primary: #334155; --text-muted: #64748b; --text-dim: #94a3b8; --text-on-brand: #ffffff; /* --- Бренд --- */ --primary: #0d9488; --primary-strong: #0f766e; --primary-soft: rgba(13, 148, 136, 0.1); --primary-glow: rgba(13, 148, 136, 0.25); --accent: #e11d48; --accent-soft: rgba(225, 29, 72, 0.1); /* --- Статуси --- */ --status-success: #059669; --status-success-soft: #d1fae5; --status-warning: #d97706; --status-warning-soft: #fef3c7; --status-danger: #dc2626; --status-danger-soft: #fee2e2; --status-info: #2563eb; --status-info-soft: #dbeafe; /* --- Постійний клієнт (VIP-бурштин на базі status-warning) --- */ --vip: #b45309; --vip-soft: rgba(217, 119, 6, 0.10); --vip-glow: rgba(217, 119, 6, 0.28); --vip-bar: #d97706; /* --- Шахматка: смуги броней --- */ --cal-span-confirmed: #0d9488; --cal-span-pending: #f59e0b; --cal-span-other: #3b82f6; --cal-weekend: #eef1f6; --cal-today: rgba(13, 148, 136, 0.08); /* --- Типографіка (Inter self-hosted, /assets/fonts) --- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --text-2xs: 0.625rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; /* --- Відступи --- */ --space-2xs: 0.125rem; --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* --- Радіуси, тіні, шари, анімація --- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08); --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.16); --z-nav: 100; --z-drawer: 800; --z-modal: 1000; --z-toast: 2000; --transition-fast: 0.15s ease; --transition-base: 0.25s ease; /* --- Оболонка --- */ --sidebar-width: 224px; --topbar-height: 58px; /* --- Шахматка: геометрія --- */ --cal-cell-w: 42px; --cal-cell-h: 42px; --cal-first-col: 190px; } /* ============ Темна тема (опція, перемикач у топбарі) ============ */ [data-theme="dark"] { --bg-page: #0b1120; --bg-sidebar: #0f172a; --surface-1: #111a2e; --surface-2: #1a2540; --surface-3: #243252; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.18); --text-strong: #f8fafc; --text-primary: #e2e8f0; --text-muted: #94a3b8; --text-dim: #64748b; --primary: #14b8a6; --primary-strong: #2dd4bf; --primary-soft: rgba(20, 184, 166, 0.15); --accent: #fb7185; --accent-soft: rgba(251, 113, 133, 0.15); --status-success: #34d399; --status-success-soft: rgba(52, 211, 153, 0.16); --status-warning: #fbbf24; --status-warning-soft: rgba(251, 191, 36, 0.16); --status-danger: #f87171; --status-danger-soft: rgba(248, 113, 113, 0.16); --status-info: #60a5fa; --status-info-soft: rgba(96, 165, 250, 0.16); --vip: #fbbf24; --vip-soft: rgba(251, 191, 36, 0.12); --vip-glow: rgba(251, 191, 36, 0.30); --vip-bar: #fbbf24; --cal-span-confirmed: #0d9488; --cal-span-pending: #d97706; --cal-span-other: #2563eb; --cal-weekend: rgba(255, 255, 255, 0.04); --cal-today: rgba(20, 184, 166, 0.12); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55); } /* Мобільна геометрія шахматки */ @media (max-width: 920px) { :root { --cal-cell-w: 34px; --cal-cell-h: 38px; --cal-first-col: 120px; } }