/* ============================================================ theme-tokens.css — ДИЗАЙН-ТОКЕНИ (CSS custom properties). Єдине джерело семантичних кольорів системи тем. Як працює механізм тем (серпень 2026): 1. Цей файл визначає ДЕФОЛТНІ значення токенів (= світла тема, палітра шаблону CRMS з resources/scss/utils/_variables.scss). 2. Команда `php artisan ui:tokenize-css` замінює у style.css відомі hex-кольори на var(--токен, #hex) — старий вигляд не змінюється (fallback = поточний колір), але весь файл стає темізованим. 3. Тема = файл resources/css/themes/.css зі скоупом [data-theme=""] { --токен: значення; ... } + за потреби будь-які глибші CSS-правила під тим самим скоупом. 4. Атрибут data-theme на ставить СЕРВЕР (mainlayout) з users.ui_theme; перемикач — у дропдауні профілю в шапці. 5. Список тем — config/themes.php. Нова тема: скопіювати themes/blue.css → themes/<нова>.css, поміняти значення, додати запис у config/themes.php. ПРАВИЛА: - НЕ перейменовувати токени: на них зав'язана мапа замін у app/Console/Commands/TokenizeThemeCss.php (MAP) і файли тем. - Новий CSS сторінок писати через var(--токен) без hardcoded hex (те саме правило, що для --brand-* у crm-utilities.css). - Джерело файлу — resources/css/ (vite-plugin-static-copy кладе у public/build/css/ при `npm run build`; на хости — копіювати обидва шляхи). НЕ класти тільки у public/build! Документація: CLAUDE.md → «Система тем (design tokens)». ============================================================ */ :root { /* ── Акцент (primary) — «фірмовий» колір дій ── */ --primary: #E41F07; /* кнопки, активні пункти, лінки-акценти */ --primary-hover: #C11A06; /* hover основних кнопок */ --primary-active: #B31805; /* натиснутий стан / темніший відтінок */ --primary-100: #FCE9E6; /* світлий тінт: фон hover-рядків, бейджів */ --primary-soft: #FFEEEC; /* найсвітліший тінт: м'які підложки */ /* ── Статусні кольори ── */ --secondary: #FFA201; --success: #5CB85C; --danger: #FC0027; --warning: #FDA700; --info: #1ECBE2; /* ── Текст ── */ --ink: #262A2A; /* заголовки, сильний текст, тёмні акценти */ --text: #6F6F6F; /* основний текст (body) */ --text-muted: #898989; /* другорядний текст */ --text-soft: #9595B5; /* приглушений сіро-синій (лейбли, іконки) */ /* ── Поверхні та межі (світла тема) ── */ --border: #E8E8E8; /* межі карток, інпутів, таблиць */ --bg-body: #F9F9FC; /* фон сторінки */ --bg-light: #F6F6F6; /* світлі підложки (smoke) */ --light: #FDFDFE; /* майже білий ($light шаблону) */ /* ── Тёмна сім'я (використовується компільованим скоупом [data-theme=dark] шаблону і тёмним сайдбаром) ── */ --dark-surface: #171724; /* $dark: тёмний фон header/sidebar */ --dark-surface-2: #1E1E2D; /* $dark-bg */ --dark-surface-3: #28283E; /* $gray-bg: карточки у dark */ --dark-input: #1A1A25; /* інпути у dark */ --dark-hover: #28283D; /* hover у dark */ --dark-border: #393947; /* межі у dark */ --dark-text: #A3A6A6; /* текст у dark */ --dark-text-2: #B5B5B5; /* другорядний текст у dark */ /* ── Палітра акцентів (бейджі, графіки, аватарки) ── */ --clr-purple: #4A00E5; --clr-tertiary: #3C2371; --clr-blue: #339DFF; --clr-green: #00918E; --clr-teal: #02A8B5; --clr-violet: #676DFF; --clr-orange: #FF9D0A; --clr-indigo: #0092E4; }