/* ============================================================ css/tokens.css — DESIGN TOKENS (ЄДИНЕ джерело істини) Sonora Project · v1.0 ------------------------------------------------------------ ПРАВИЛО: жодних «сирих» кольорів/значень в інших CSS-файлах. Підключається ПЕРШИМ серед локальних стилів у всіх HTML-сторінках. Нові значення додаються сюди, а потім використовуються через var(--...). ============================================================ */ :root { /* ============ 1. COLORS: НЕЙТРАЛЬНА ШКАЛА (Gray) ============ Від темного до світлого. Використовувати через семантичні токени нижче (--color-bg-*, --color-text-*, --color-border-*). У коментарях — поточні місця використання в проєкті. */ --gray-950: #0a0a0a; /* splash-screen bg */ --gray-900: #121212; /* = --bg-dark / --bg-color (осн. фон) */ --gray-875: #15171a; /* accounting sidebar, wiz-input bg */ --gray-850: #1a1a1a; /* login-card, mobile bg, offcanvas */ --gray-825: #1c1f23; /* modal-header, day-header, sticky */ --gray-800: #1e1e1e; /* = --card-bg / --bg-panel (картки) */ --gray-790: #1e2124; /* accounting body bg (--acc-bg) */ --gray-775: #212529; /* modal-content, navbar dark, wizard */ --gray-750: #252525; /* stepper, queue-header, offcanvas */ --gray-725: #2a2a2a; /* studio-slot рамки (mobile) */ --gray-700: #2b3035; /* wizard-body, fin-shift-card, cash */ --gray-690: #2c2c2c; /* order-row hover, stat-box bg */ --gray-675: #2c3034; /* search-results dropdown */ --gray-650: #2d2d2d; /* = --input-bg (інпути) */ --gray-630: #333333; /* = --border (admin) */ --gray-625: #343a40; /* badge, btn-unpaid, section-title */ --gray-600: #3a3f44; /* розділові рядки таблиць */ --gray-580: #3d3d3d; /* btn-status.unpaid (mobile) */ --gray-550: #444444; /* КАНОН рамок (--border-color) */ --gray-525: #495057; /* рамки форм, scrollbar-thumb */ --gray-500: #555555; /* рамки кнопок/фокусів */ --gray-450: #666666; /* btn-secondary рамки, misc */ --gray-400: #6c757d; /* bootstrap secondary / placeholder */ --gray-375: #777777; /* dashed рамка pending-delete */ --gray-350: #888888; /* muted-підписи (--text-muted adm) */ --gray-325: #999999; /* step-dot текст, app-title */ --gray-300: #aaaaaa; /* order id/time, user-badge */ --gray-275: #adb5bd; /* КАНОН muted-тексту */ --gray-250: #bbbbbb; /* modal pre */ --gray-225: #cccccc; /* inst-name, bank-row */ --gray-215: #cdcdcd; /* mobile version label */ --gray-150: #dcdcdc; /* text-label */ --gray-100: #e0e0e0; /* = --text-main (text) */ --gray-075: #e9ecef; /* z-report чеки */ --gray-000: #ffffff; /* чистий білий (дубляж --white) */ /* Окремі теплі/холодні відтінки */ --warm-dark: #202428; /* mobile-menu-btn bg (admin-mobile) */ --cool-muted: #adadad; /* offcanvas .text-muted (desktop) */ /* ============ 2. BRAND / ACCENT (Orange) ============ */ --orange-deep: #d35400; /* адмін-акцент (--accent-orange) */ --orange-brand: #e65100; /* клієнтський візард (--accent) */ --orange-hover: #ff6d00; /* hover клієнтського акценту */ --orange-warn: #ff9800; /* warn / admin-badge / selected */ /* ============ 3. BLUE ============ */ --blue-900: #0c336c; /* pending bg (finance desktop) */ --blue-850: #1f2f45; /* .step-indicator.active bg (wizard) */ --blue-800: #2a4060; /* legacy muted blue (замінено на --color-primary) */ --blue-700: #0b5ed7; /* .btn-primary hover / shift-card */ --blue-600: #0d6efd; /* PRIMARY (КАНОН) */ --blue-400: #448aff; /* .dot-blue */ --blue-300: #86b7fe; /* focus-ring border (wizard) */ --blue-200: #8bb9fe; /* ghost-event border (wizard) */ /* ============ 4. CYAN (Info) ============ */ --cyan-300: #0dcaf0; /* info / fin-card-time / accounting logo */ /* ============ 5. GREEN ============ */ --green-900: #10641dcc; /* .evt-confirmed (8-значний HEX) */ --green-700: #12603c; /* .btn-status.paid (desktop) */ --green-600: #198754; /* instrument.active border, btn.cash */ --green-500: #28a745; /* bootstrap green / mobile open */ --green-400: #2ecc71; /* SUCCESS (КАНОН, finance) */ --green-300: #69f0ae; /* .dot-green */ --green-200: #00e676; /* «матричний» зелений (логи) */ --green-100: #00c853; /* style.css --success-color */ /* ============ 6. RED (Danger) ============ */ --red-600: #d32f2f; /* .evt-new */ --red-500: #dc3545; /* DANGER (КАНОН) */ --red-400: #e74c3c; /* accounting .text-danger */ --red-300: #ff5252; /* .dot-red, error text */ --pink-mauve: #cf6679; /* style.css --error-color */ /* ============ 7. YELLOW (Warning) ============ */ --yellow-600: #b08d24; /* .btn-status.partial (desktop) */ --yellow-500: #ffc107; /* WARNING (КАНОН) */ --yellow-400: #ffd740; /* .dot-yellow */ --yellow-300: #ffca28; /* instrument warning */ --yellow-200: #fbc02d; /* .evt-draft */ /* ============ 8. SEMANTIC: ФОНИ ============ */ --color-bg-main: var(--gray-900); --color-bg-card: var(--gray-800); --color-bg-elevated: var(--gray-700); --color-bg-modal: var(--gray-775); --color-bg-input: var(--gray-650); --color-bg-hover: rgba(255, 255, 255, 0.05); --color-bg-hover-strong: rgba(255, 255, 255, 0.1); /* ============ 9. SEMANTIC: ТЕКСТ ============ */ --color-text-main: var(--gray-100); --color-text-strong: var(--gray-000); --color-text-muted: var(--gray-275); --color-text-muted-soft: var(--gray-350); --color-text-placeholder: var(--gray-400); --color-text-label: var(--gray-150); /* ============ 10. SEMANTIC: РАМКИ ============ */ --color-border-main: var(--gray-550); --color-border-soft: var(--gray-630); --color-border-faint: var(--gray-600); --color-border-input: var(--gray-525); --color-border-strong: var(--gray-500); /* #555 */ --color-border-accent: var(--orange-brand); /* ============ 11. SEMANTIC: СТАТУСИ ============ */ --color-primary: var(--blue-600); --color-primary-hover: var(--blue-700); --color-accent: var(--orange-brand); --color-accent-hover: var(--orange-hover); --color-accent-admin: var(--orange-deep); --color-success: var(--green-400); /* КАНОН */ --color-success-alt: var(--green-500); --color-success-deep: var(--green-600); --color-danger: var(--red-500); /* КАНОН */ --color-danger-soft: var(--red-300); --color-warning: var(--yellow-500); /* КАНОН */ --color-warning-alt: var(--yellow-400); --color-info: var(--cyan-300); /* ============ 11b. STATUS (канонізовані, однакові на desktop=mobile) ============ */ /* Статуси фін-змін (десктоп = канон) */ --shift-status-open: var(--green-400); /* #2ecc71 моб. було #28a745 */ --shift-status-planned: var(--gray-400); /* #6c757d моб. було #ffc107 */ --shift-status-closed: var(--red-500); /* #dc3545 */ /* Кнопки статусів оплати (єдині для обох версій) */ --pay-status-unpaid: var(--gray-625); /* #343a40 моб. було #3d3d3d */ --pay-status-partial: var(--color-warning);/* #ffc107 десктоп було #b08d24 */ --pay-status-paid: var(--green-600); /* #198754 десктоп було #12603c */ --pay-status-pending: var(--blue-900); /* #0c336c моб. було #0dcaf0 */ /* Контрастний «чорний» фон полів вводу (.bg-black) — обидві версії мали сірий (84/100), тепер один канон */ --color-bg-contrast: #545454; /* ============ 12. OVERLAYS ============ */ --overlay-dark: rgba(0, 0, 0, 0.85); /* канонічний */ --overlay-darker: rgba(0, 0, 0, 0.9); --overlay-lighter: rgba(0, 0, 0, 0.7); /* ============ 13. TYPOGRAPHY ============ */ --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-mono: "Consolas", "Courier New", monospace; --fs-xs: 0.65rem; /* captions / table micro */ --fs-sm: 0.75rem; /* small meta */ --fs-sm-md: 0.85rem; /* table headers (upper) */ --fs-md: 0.9rem; /* основний дрібний */ --fs-base: 1rem; /* 16px default */ --fs-lg: 1.1rem; /* buttons, titles */ --fs-xl: 1.25rem; /* modal titles */ --fs-2xl: 1.5rem; /* wiz-input, stat value */ --fs-3xl: 2.5rem; /* balance / big number */ /* ============ 14. SPACING (база 5px) ============ */ --spacing-base: 5px; --spacing-sm: 10px; --spacing-md: 15px; --spacing-lg: 20px; --spacing-xl: 25px; --spacing-2xl: 30px; /* ============ 15. RADIUS ============ */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-10: 10px; --radius-xl: 12px; --radius-16: 16px; --radius-pill: 20px; --radius-round: 50%; /* ============ 16. SHADOWS ============ */ --shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.3); /* shift-card */ --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.3); /* fin-shift-card */ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); /* cards / wizard */ --shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.3); /* cards :hover */ --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5); /* wiz-container */ --shadow-lg-strong: 0 10px 30px rgba(0, 0, 0, 0.8); /* mobile modal */ --shadow-xl: 0 15px 40px rgba(0, 0, 0, 0.6); /* finance modal */ --shadow-2xl: 0 20px 50px rgba(0, 0, 0, 0.5); /* overlay */ --shadow-2xl-strong: 0 20px 50px rgba(0, 0, 0, 0.8); /* cash modal */ --shadow-glow: 0 0 30px rgba(0, 0, 0, 0.8); /* login card */ /* ============ 17. LAYOUT ============ */ --layout-navbar-height: 50px; --layout-navbar-height-mobile: 56px; --layout-sidebar-width: 250px; --layout-date-picker-width: 110px; --layout-content-width: 400px; --layout-timeline-time-col: 50px; }