/* ============================================================ * CRM-ALL Platform — Design Tokens * * Єдині CSS-змінні для всіх модулів. Підключається ПЕРЕД * components.css і модульними CSS у app/Views/layout.php. * * Dark mode керується через [data-bs-theme="dark"] на * (theme-toggle у navbar). * ============================================================ */ :root { /* Fonts */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Backgrounds */ --color-background-primary: #ffffff; --color-background-secondary: #f7f6f3; --color-background-tertiary: #f0eeea; --color-background-info: #E6F1FB; --color-background-success: #E1F5EE; --color-background-warning: #FAEEDA; --color-background-danger: #FCEBEB; --color-background-board: #f4f3ef; /* Font family — Inter якщо встановлений у системі, інакше system fonts. Self-hosted vendor (TODO: завантажити в /assets/vendor/inter/) — додасть стабільність */ --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; /* Ширина скролбара (кастомний ::-webkit-scrollbar = 4px, gutter stable). ДЕФОЛТ = 4px, щоб перший paint уже враховував її: раніше було unset(0) → JS-вимір ставив 4px → правий край топбару/слайд-оверів стрибав на 4px НА КОЖНОМУ релоаді (телеметрія: tbR 1592→1588, «шапка смикається»). JS-sync (layout.php) коригує, якщо середовище інше. */ --scrollbar-w: 4px; /* Texts — посилений контраст */ --color-text-primary: #0a0908; --color-text-secondary: #302e2a; /* насиченіше (типографіка-аудит 2026-07): менше «сірої каші» */ --color-text-tertiary: #565349; /* насиченіше — вторинний текст читається впевненіше */ /* Типо-ваги — ЄДИНА ієрархія для всіх поверхонь (variable Inter). Типографіка-аудит 2026-07: заголовки/ключові значення посилені, тіло = 430 (на body). Джерело правди — усі поверхні (таблиці/картки/панель/модалки/сайдбар) посилаються на ці токени. */ --fw-title: 650; /* заголовки сторінок/секцій/панелі, назви карток/колонок */ --fw-strong: 600; /* ключові значення: суми, головний ідентифікатор рядка */ --fw-medium: 560; /* напів-акцент: шапки таблиць, маркери, лічильники */ --tracking-tight: -0.011em; /* лише mixed-case заголовки (НЕ uppercase-міні-лейбли) */ --color-text-info: #0C447C; --color-text-success: #085041; --color-text-warning: #633806; --color-text-danger: #791F1F; /* Borders */ --color-border-primary: #b4b2a9; --color-border-secondary: #d1cfc8; --color-border-tertiary: #f0eeea; /* Semantic accents */ --color-info: #378ADD; --color-success: #1D9E75; --color-warning: #EF9F27; --color-danger: #E24B4A; --color-tender: #BA7517; --color-purple: #7F77DD; /* Radii */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 20px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,.05); --shadow-md: 0 2px 8px rgba(0,0,0,.08); --shadow-lg: 0 4px 16px rgba(0,0,0,.12); --shadow-panel: 0 2px 20px rgba(0,0,0,.10); /* Spacing scale (8-point grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* Transition */ --t-fast: .12s ease; --t-base: .15s ease; --t-slow: .25s ease; /* Z-index */ --z-dropdown: 1000; --z-modal: 1040; --z-slideover: 1045; --z-handle: 1060; --z-toast: 1080; } /* Backwards-compat aliases — для core layout.php (--surface/--text/etc) */ :root { --surface: var(--color-background-primary); --bg-soft: var(--color-background-secondary); --text: var(--color-text-primary); --muted: var(--color-text-secondary); --border: var(--color-border-secondary); --accent: var(--color-info); --primary: var(--color-text-primary); } /* ============================================================ * Dark mode (atribute-driven, не media query — синхр з toggle) * * "Замша" v2 — холодна корпоративна нічна тема: глибокі сині-сланцеві * фони, теплі-холодні приглушені кольори чіпів (шавлія/цегла/пісок/ * лаванда), cool blue-grey текст (#dde4ed). Замінила warm "замша" v1 * (#c8c4bc warm-grey text) на користь B2B-формального відчуття. * ============================================================ */ [data-bs-theme="dark"] { /* Нейтрально-темні фони (Google-style ніч, 2026-07) — навʼю прибрано. */ --color-background-primary: #1a1b1d; /* основний фон body */ --color-background-secondary: #26272a; /* картки/панелі */ --color-background-tertiary: #202123; /* surface (slide-over, modals) */ --color-background-board: #141517; /* фон канбану — найтемніший */ /* Фони пігулок — матові семантичні тінти. */ --color-background-info: #1b2733; /* синій туман */ --color-background-success: #1a2e25; /* шавлія */ --color-background-warning: #2a2416; /* пісок */ --color-background-danger: #3b2222; /* цегла (2026-07-10: +L, «червоний на чорному не видно») */ --color-background-purple: #231f30; /* лаванда (stage) */ --color-background-muted: #26272a; /* нейтральний (default chip / .svc) */ /* Тексти — холодні blue-grey замість warm-grey (v1). */ --color-text-primary: #dde4ed; /* головний — холодний димчастий */ --color-text-secondary: #a8b5c4; /* приглушений */ --color-text-tertiary: #7a8fa6; /* мутед */ --color-text-info: #6a9fc0; /* блакитний туман */ --color-text-success: #6db896; /* шавлія */ --color-text-warning: #b89a50; /* пісок */ --color-text-danger: #f09b9b; /* цегла (2026-07-10: +L для контрасту на темному) */ --color-text-purple: #9b87c0; /* лаванда */ --color-text-muted: #9aa0a6; /* нейтральний */ /* Borders — solid blue-grey замість напівпрозорих rgba(white). */ --color-border-primary: #55575e; --color-border-secondary: #494b51; --color-border-tertiary: #3b3d42; /* Borders для пігулок — на 1 крок темніші за текст пігулки. */ --color-border-info: #2a3f55; --color-border-success: #2a4a38; --color-border-warning: #443a22; --color-border-danger: #5c3535; --color-border-purple: #382d4a; --color-border-muted: #2d3a4a; /* Accent — м'якший корпоративний синій (раніше #378ADD). */ --color-info: #4d8fcc; /* Топбар + інпути — окремі утилітарні токени. */ --color-topbar: rgba(26,26,28,.96); --color-input-bg: #1c1c1e; --color-sidebar-bg: rgba(20,20,22,.94); --shadow-sm: 0 1px 3px rgba(0,0,0,.30); --shadow-md: 0 2px 8px rgba(0,0,0,.35); --shadow-lg: 0 4px 16px rgba(0,0,0,.40); --shadow-panel: 0 2px 20px rgba(0,0,0,.50); }