/* ══════════════════════════════════════════════════════════════════════════════ ks-tokens.css — ЄДИНЕ ДЖЕРЕЛО ТОКЕНІВ ПРОДУКТУ (BRIEF-13 §3) Контракт: DESIGN-SYSTEM.md (ратифіковано 23.08.2026) + SPACING-SYSTEM.md. 🔴 ВИЗНАЧЕННЯ ТОКЕНА ПОЗА ЦИМ ФАЙЛОМ — ДЕФЕКТ. Тримає перевірка C51. Причина архітектурна, а не естетична: доти кожен із п'яти файлів мав власний :root, і правка в одному фізично не доходила до інших — її треба було свідомо продублювати чотири рази, і саме цей крок щоразу губився. Тепер правка тут застосовується скрізь сама. Вантажать п'ять поверхонь: /driver, /dispatcher, /ceo, /client, index.html. Підключати ПЕРШИМ, до власних стилів. ══════════════════════════════════════════════════════════════════════════ */ :root{ color-scheme: dark; /* ── 1.1 · ВІСІМ БАЗОВИХ ВІДТІНКІВ ────────────────────────────────────────── Записані трійками без rgb(), щоб альфа підставлялась через rgb(var(--hue-x) / var(--a-N)). Це і є механізм, що прибирає 138 зайвих кольорів. 🔴 Дев'ятого відтінку не існує. */ --hue-light: 248 248 248; /* текст, рамки, приглушене */ --hue-accent: 243 148 68; /* оранжевий — дія, акцент, активний стан */ --hue-ink: 4 5 5; /* тло, затемнення */ --hue-pos: 61 214 140; /* зелений — ТІЛЬКИ фінальна сума «на руки» */ --hue-neg: 229 115 91; /* червоний — помилка, скасування */ --hue-info: 108 194 242; /* синій — довідкове, вторинні серії */ --hue-black: 0 0 0; /* тіні */ --hue-white: 255 255 255; /* підкладки поверхонь */ /* ── 1.2 · ДРАБИНА ПРОЗОРОСТІ — ДЕВ'ЯТЬ СХОДИНОК ──────────────────────────── 66 значень альфи згортаються сюди. Найбільший видимий зсув .55 → .62, 47 місць — ратифіковано власником 23.08.2026. */ --a-1: .04; --a-2: .08; --a-3: .14; --a-4: .20; --a-5: .30; --a-6: .45; --a-7: .62; --a-8: .82; --a-9: 1; /* ── 1.3 · СЕМАНТИКА — КОД ВЖИВАЄ ТІЛЬКИ ЦЕ ──────────────────────────────── Пряме звернення до --hue-* і --a-* дозволене лише всередині цього файла. */ --text: rgb(var(--hue-light) / var(--a-9)); --text-2: rgb(var(--hue-light) / var(--a-8)); --muted: rgb(var(--hue-light) / var(--a-7)); --dim: rgb(var(--hue-light) / var(--a-6)); --faint: rgb(var(--hue-light) / var(--a-4)); --bg: rgb(var(--hue-ink) / var(--a-9)); --surface: rgb(var(--hue-white) / var(--a-1)); --surface-2: rgb(var(--hue-white) / var(--a-2)); --surface-sunk: rgb(var(--hue-ink) / var(--a-8)); --border-hair: rgb(var(--hue-light) / var(--a-2)); --border: rgb(var(--hue-light) / var(--a-3)); --border-strong:rgb(var(--hue-light) / var(--a-4)); --accent: rgb(var(--hue-accent) / var(--a-9)); --accent-text: rgb(var(--hue-accent) / var(--a-8)); --accent-line: rgb(var(--hue-accent) / var(--a-5)); --accent-wash: rgb(var(--hue-accent) / var(--a-3)); --accent-tint: rgb(var(--hue-accent) / var(--a-1)); --on-accent: #1A0E03; --pos: rgb(var(--hue-pos) / var(--a-9)); --pos-line: rgb(var(--hue-pos) / var(--a-5)); --pos-wash: rgb(var(--hue-pos) / var(--a-1)); --neg: rgb(var(--hue-neg) / var(--a-9)); --neg-wash: rgb(var(--hue-neg) / var(--a-3)); --info: rgb(var(--hue-info) / var(--a-9)); --info-wash: rgb(var(--hue-info) / var(--a-2)); /* 🔴 ЗАВІСА — НЕ ПОВЕРХНЯ (DESIGN-SYSTEM.md §1.3, §1.4). Затемнення під модалкою й карткою логіна має власне ім'я і власну сходинку .62. Підміна на --surface-sunk (.82) дала стрибок альфи на .27 замість ратифікованих .07 — фон під карткою логіна став темнішим майже вдвічі. */ --scrim: rgb(var(--hue-ink) / var(--a-7)); /* ── 1.3.1 · СТАТУС І ТИП — ТІЛЬКИ ЛЕНДІНГ ───────────────────────────────── На продажній сторінці колір несе ІНШУ семантику, ніж у кабінеті: там зелений не «гроші на руки», а «онлайн» і «локальний рейс». Три кольори бейджів типу рейсу ратифіковані як частина бренду. 🔴 У кабінетах ці токени вживати заборонено — тримає C52. */ --status-live: rgb(var(--hue-pos) / var(--a-9)); /* «DISPATCH · LIVE» */ --type-local: rgb(var(--hue-pos) / var(--a-9)); /* бейдж LOCAL */ --type-normal: rgb(var(--hue-info) / var(--a-9)); /* бейдж NORMAL */ --type-long: rgb(var(--hue-accent) / var(--a-9)); /* бейдж LONG */ /* ── СЕРПАНОК ГЕРОЯ — ІМЕНОВАНИЙ ВИНЯТОК (BRIEF-14 §5) ───────────────────── 🔴 Це ЄДИНЕ місце, де значення не підпорядковані драбині, і воно оголошене вголос замість мовчазного порушення. Причина: #pan-overlay — художній градієнт на п'ять зупинок, підібраний під фотографію героя. Драбина має для чорнила лише .82 і 1; звести п'ять зупинок до двох означає перетворити градієнт на заливку, тобто змінити композицію. Значення ті самі, що були на 420418b, — вигляд не міняється ні на піксель. C47/C50 дістають явний виняток. */ --hero-veil-1: rgba(0,0,0,.35); --hero-veil-2: rgba(0,0,0,.82); --hero-veil-3: rgba(2,3,3,.20); --hero-veil-4: rgba(2,3,3,.55); --hero-veil-5: rgba(2,3,3,.70); /* ── 2 · ПРОМІЖКИ (SPACING-SYSTEM.md §2) ──────────────────────────────────── Проміжних значень не існує. Проміжок визначає ПАРА РОЛЕЙ, володіє ним КОНТЕЙНЕР (gap або > * + *). */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 20px; --sp-6: 32px; /* ── 3 · РАДІУСИ ─────────────────────────────────────────────────────────── 30 → 6: 2→4 · 6,9,10→8 · 12→12 · 16,22→20 · 999→pill · 50%→round. */ --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 20px; --r-pill: 999px; --r-round: 50%; /* ── 4 · ТІНІ Й СВІЧЕННЯ ─────────────────────────────────────────────────── 49 → 5. 🔴 !important у тіні заборонений — лікується структурою. */ --elev-1: 0 8px 24px rgb(var(--hue-black) / var(--a-5)); --elev-2: 0 10px 30px rgb(var(--hue-black) / var(--a-6)); --elev-3: 0 26px 60px rgb(var(--hue-black) / var(--a-7)); --ring: 0 0 0 3px rgb(var(--hue-accent) / var(--a-3)); --glow: 0 0 28px rgb(var(--hue-accent) / var(--a-6)); /* ── 5 · РОЗМИТТЯ ────────────────────────────────────────────────────────── 13 → 3: 8→8 · 12,14,16,24→16 · 28,36→36. */ --blur-1: blur(8px); --blur-2: blur(16px); --blur-3: blur(36px); /* ── 6 · ТИПОГРАФІКА ─────────────────────────────────────────────────────── Кегль 50 → 10. Гарнітура одна на весь продукт. */ --f: 'Arimo','Helvetica Neue',Helvetica,Arial,sans-serif; --fs-1: 9px; --fs-2: 10px; --fs-3: 11px; --fs-4: 12px; --fs-5: 13px; --fs-6: 15px; --fs-7: 18px; --fs-8: 24px; --fs-9: 40px; --fs-10: 64px; --fw-1: 400; --fw-2: 600; --fw-3: 700; --lh-1: 1.15; --lh-2: 1.35; --lh-3: 1.55; --lh-4: 1.7; --ls-1: -0.02em; --ls-2: -0.01em; --ls-3: 0; --ls-4: 0.14em; --ls-5: 0.05em; --ls-6: 0.10em; --ls-7: 0.02em; /* ── 7 · РАМКИ ───────────────────────────────────────────────────────────── 51 → 3. Ширина завжди 1px: місця, де товща рамка несе сенс, немає. */ --bd-hair: 1px solid var(--border-hair); --bd: 1px solid var(--border); --bd-strong: 1px solid var(--border-strong); /* ── 8 · ШАРИ ────────────────────────────────────────────────────────────── 🔴 Числовий літерал у z-index заборонений: без імені неможливо сказати, що над чим. */ --z-base: 0; --z-raised: 1; --z-sticky: 10; --z-drop: 100; --z-modal: 1000; --z-toast: 2000; /* ══ ПРОДУКТОВІ ТОКЕНИ ПОЗА ШКАЛОЮ ДИЗАЙН-СИСТЕМИ ═════════════════════════ Живуть ТУТ, а не в поверхневих файлах, бо C51 вимагає одного джерела для БУДЬ-ЯКОГО токена. Кожен має причину бути поза шкалою, і причина названа. */ /* Непрозора поверхня. Драбина дає лише прозорі відтінки, а випадне меню й шапка мусять бути непрозорими — крізь них не має просвічувати вміст. */ --panel: #121519; /* Оптичний зсув підпису до краю картки. Це НЕ крок ритму: снап до 4px подвоїв би його у 84 місцях і зсунув усі підписи в продукті. */ --optical: 2px; /* Падінг — ОКРЕМИЙ набір (SPACING-SYSTEM.md §3: падінг картки має власну таблицю 14/12 і 12/10, тобто на шкалі ритму не живе). */ --pad-1:1px; --pad-2:2px; --pad-3:3px; --pad-4:4px; --pad-5:5px; --pad-6:6px; --pad-7:7px; --pad-8:8px; --pad-9:9px; --pad-10:10px; --pad-12:12px; --pad-13:13px; --pad-14:14px; --pad-15:15px; --pad-16:16px; --pad-18:18px; --pad-20:20px; --pad-22:22px; --pad-24:24px; --pad-26:26px; --pad-28:28px; --pad-32:32px; --pad-36:36px; --pad-40:40px; --pad-44:44px; --pad-46:46px; --pad-50:50px; --pad-60:60px; --pad-72:72px; --pad-96:96px; --pad-100:100px; --pad-192:192px; /* Вертикальний ритм секцій лендінгу. Композиція лендінгу цією хвилею НЕ чіпається (BRIEF-13 §7), тому значення лишаються як є. */ --rh-3:3px; --rh-5:5px; --rh-6:6px; --rh-9:9px; --rh-10:10px; --rh-14:14px; --rh-16:16px; --rh-18:18px; --rh-24:24px; --rh-28:28px; --rh-36:36px; --rh-40:40px; --rh-44:44px; --rh-48:48px; --rh-72:72px; /* Ритм секції кабінету і ширини контейнерів — розкладка, не шкала кроку. */ --sp-section: 96px; --sp-section-m: 72px; --container: 1180px; --container-wide: 1400px; --go-w: 30px; /* ширина кнопки переходу «›» */ /* Картка-показник (DESIGN-SYSTEM.md §6.3, ратифіковано в BRIEF-10). 20px і 18px не лежать на шкалі кеглю свідомо: це один компонент із власною ратифікованою парою значень. Підпис і підрядок — з шкали (--fs-1 = 9, --fs-2 = 10) і на телефоні НЕ зменшуються. */ --kpi-v: 20px; /* Рух. --ease / --dur лишаються як АЛІАСИ на драбину нижче: на них ще посилаються наявні правила, і різати їх у цій хвилі означало б чіпати характер руху, а не токенізувати наявний. */ --ease: var(--ease-out); --dur: var(--dur-2); /* ── BRIEF-16 §7 · РУХ: ДРАБИНА НА ФАКТИЧНИХ ЗНАЧЕННЯХ ──────────────────── DESIGN-SYSTEM.md §9A.1/§9A.2, виведено з виміру продукту 23.08.2026 (181 елемент із переходами): 0.22s ×158 · 0.26s ×140 · 0.24s ×88 · 0.30s ×30 · 0.18s ×27 · 0.50s ×26 · 0.42s ×13 · 0.28s ×2. Кожне наявне значення лягає в драбину зі зсувом ≤ 20 мс — саме тому заміна безпечна. */ --dur-1: 180ms; /* миттєве: колір, прозорість, рамка */ --dur-2: 240ms; /* стандарт: ховер, фокус, дрібний зсув */ --dur-3: 300ms; /* поява блока, розкриття списку, шухляда */ --dur-4: 420ms; /* модалка, шухляда */ --dur-5: 500ms; /* поява секції при скролі */ --dur-pulse: 2400ms; /* нескінченні цикли: пульс «наживо», смуга завантаження */ /* ── НЕСКІНЧЕННІ ЦИКЛИ Й ЗНАЧЕННЯ ПОЗА ДРАБИНОЮ ─────────────────────────── 🔴 РОЗБІЖНІСТЬ ІЗ КОНТРАКТОМ, названа вголос: §9A.1 дає циклам ОДИН --dur-pulse, а в продукті їх пʼять різних (кільце, смуга, мерехтіння, прогрес, пульс рейки). Зводити їх до одного означало б ПЕРЕРОБИТИ рух, а не токенізувати наявний — тобто зробити рівно те, що бриф §11 забороняє. Тому кожен названий окремо, значення НЕ змінені. Те саме з двома тривалостями, чий зсув до драбини > 20 мс: за правилом §7 вони не підганяються, але й літералами не лишаються. */ --dur-loop-spin: 800ms; /* .spinner / .spin — кільце очікування */ --dur-loop-slide: 1150ms; /* ksLoadSlide — смуга невизначеності */ --dur-loop-shimmer: 1300ms; /* skelShimmer — мерехтіння каркаса */ --dur-loop-slow: 1600ms; /* те саме кільце під prefers-reduced-motion */ --dur-loop-rail: 2800ms; /* ksRailPulse — пульс рейки лендінгу */ --dur-reveal: 580ms; /* ksDrawIn — поява лого; до --dur-5 зсув −80 мс, не застосовано */ --dur-hair: 140ms; /* тінь повзунка; до --dur-1 зсув −40 мс, не застосовано */ --ease-out: cubic-bezier(.16, 1, .3, 1); /* усе, що з'являється або реагує */ --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* усе, що їде туди й назад */ --ease-std: cubic-bezier(.4, 0, .2, 1); /* дрібні зміни стану */ /* ── BRIEF-16 §6 · КОНТУР ВТОРИННОЇ КНОПКИ ──────────────────────────────── Оранжевий .62 — та сходинка драбини, куди лягає вихідна .55. Окреме ім'я, а не --accent-line (.30): у контуру кнопки й у декоративної рамки різні задачі, і .30 на кнопці читається як «вимкнено». */ --accent-border: rgb(var(--hue-accent) / var(--a-7)); /* ── BRIEF-16 §3 · КАРКАС ОЧІКУВАННЯ ────────────────────────────────────── Висоти зняті виміром відрендереного продукту (1400px, uk): .kpi — 73 (/ceo, /driver) · 87 (/client) · 95 (/dispatcher); рядок таблиці — 47 в усіх чотирьох. Одне значення на продукт = медіана 80; залишковий стрибок ±7…±15px на двох кабінетах названий у звіті. */ --sk-kpi-h: 80px; --sk-row-h: 47px; /* ── §10.6 · СТРІЛКА РОЗГОРТАННЯ СЕЛЕКТА — ОДИН РЕЦЕПТ НА ПРОДУКТ ────────── 🔴 Живе ТОКЕНОМ, бо всередині `data:`-URL не резолвиться ЖОДНА змінна: SVG там — окремий документ, і `var(--dim)` та `currentColor` у ньому мертві. Саме через це стрілка була у статусного селекта (хардкод %23999) і НЕ була у перемикачів періоду та гранулярності — там стояв `stroke='var(--dim)'`, тобто штриха не було взагалі й контрол не читався як список. Літерал тут законний: це блок токенів, єдине джерело (C51), і значення — той самий --hue-light з тією ж альфою --a-6, що дає --dim. */ --sel-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F8F8F8' stroke-opacity='0.45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* Відступ стрілки від правого краю контрола — однаковий у КОЖНОГО селекта. */ --sel-caret-gap: 12px; /* Місце під стрілку: gap + 12px самої стрілки + оптичний зазор до тексту. */ --sel-caret-pad: 32px; /* ── §10.7 · СТАТУС — ЦЕ СТАН, А НЕ СУМА ────────────────────────────────── Тому зелений тут законний, і C52 його не рахує. Чотири стани — чотири імені; дев'ятого відтінку не заводиться, це аліаси наявних hue. «Не виставлявся» — ВІДСУТНІСТЬ стану, не стан: приглушений, не колір. */ --status-paid: rgb(var(--hue-pos) / var(--a-9)); --status-unpaid: rgb(var(--hue-neg) / var(--a-9)); --status-pending: rgb(var(--hue-info) / var(--a-9)); /* 🔴 ОКРУГЛЕНО ВГОРУ: --a-6 (.45) на --panel дає ефективний контраст 4.32:1, тобто нижче порога 4.5:1 (виміряно C27 на /ceo → Розбивка). Найближча сходинка драбини вгору — --a-7 (.62), рівно та, якою продукт уже пише весь приглушений текст (--muted). Нового відтінку не заводимо. */ --status-none: rgb(var(--hue-light) / var(--a-7)); } /* Картка-показник на телефоні: зменшується ТІЛЬКИ значення (20 → 18). Ратифіковано 23.08.2026; півпіксельних кеглів (8.5 / 9.5) більше не існує. */ @media (max-width:560px){ :root{ --kpi-v: 18px; } } /* ══ DEPRECATED — ВИДАЛИТИ В НАСТУПНІЙ ХВИЛІ ═══════════════════════════════ Аліаси старих імен. У коді НЕ вживаються: усі вживання переписані на нові імена в цій же хвилі (BRIEF-13 §3.4). Це страховка від пропущеного місця, а не спосіб не переписувати. Перевірка C47/C48 ловить старе ім'я у джерелі. ══════════════════════════════════════════════════════════════════════════ */ :root{ --radius-box: var(--r-3); --pill: var(--r-pill); --ls-label: var(--ls-4); --shadow-card: var(--elev-2); --shadow-card-sm:var(--elev-1); --shadow-modal: var(--elev-3); --glow-btn: var(--glow); }