/** * tokens.css — Agro Space Design System * * Три рівні. Правило одне: компонент бачить лише РІВЕНЬ 2 і 3. * * РІВЕНЬ 1 — ПРИМІТИВИ (--brand-*, --neutral-*) * Сира палітра бренду. Тут живуть конкретні hex. * У компонентних стилях НЕ використовувати: примітив не каже, навіщо * він, тому його не можна перевизначити для теми, не зламавши сенсу. * * РІВЕНЬ 2 — РОЛІ (--color-*, --text-*, --space-*, --radius-*, --shadow-*) * Чим річ є для інтерфейсу: поверхня, текст, акцент, межа. Саме цим * користуються всі компоненти. Темна тема перевизначає лише цей рівень. * * РІВЕНЬ 3 — КОМПОНЕНТНІ (--control-*, --row-*, --panel-*, --icon-*) * Розміри повторюваних елементів. Щоб «зробити кнопки нижчими» було * одним рядком, а не пошуком по сорока файлах. * * Що це дає: дизайнер міняє бренд — редагує РІВЕНЬ 1. Міняє вигляд теми — * РІВЕНЬ 2. Міняє щільність інтерфейсу — РІВЕНЬ 3. Компоненти не чіпає ніхто. * * Перевіряється машиною: `node scripts/check-tokens.mjs` падає, якщо в * css/*.css поза цим файлом зʼявився сирий hex-колір. */ :root { /* ══════════════════════════════════════════════════════════════════ РІВЕНЬ 1 — ПРИМІТИВИ Палітра з бренд-буку (agro-space.app_new_design / Agro-space Brand.html). Власні назви бренду збережено: Forest, Pine, Meadow, Amber, Linen, Ink. У компонентах не використовувати. ══════════════════════════════════════════════════════════════════ */ /* Зелений. Forest — основний знак бренду, Meadow — живий, світлий, Pine — глибокий. Щаблі 100/200/300/800 — точно зі шкали бренд-буку (g-100…g-600); 500, 600, 950 і 50 виведені між ними. */ --brand-pine: #0F2E1F; /* Pine */ --brand-forest: #1F5238; /* Forest — основний */ --brand-meadow: #3D8B5F; /* Meadow */ --brand-green-950: #0B241A; --brand-green-900: #0F2E1F; /* g-700 */ --brand-green-800: #163E2A; /* g-600 */ --brand-green-700: #1F5238; /* g-500 */ --brand-green-600: #2A6544; --brand-green-500: #2E6E4A; --brand-green-400: #3D8B5F; /* g-400 */ --brand-green-300: #75B294; /* g-300 */ --brand-green-200: #A7CEB6; /* g-200 */ --brand-green-100: #CDE3D6; /* g-100 */ --brand-green-50: #EAF3EE; /* Зелені для темного тла. У бренд-буку темної теми немає, тож їх виведено з Meadow: той самий тон, піднятий до читомості текстом. Meadow на темній поверхні дає лише 3,8 : 1. */ --brand-green-glow: #6DC994; --brand-green-glow-light: #8FD8AE; /* Було #7FE3AB / #A3EEC3 — неонова мʼята. Текстом читалась добре, але суцільні кнопки нею світились на темному тлі й втомлювали очі (Степан, 2026-09-28). Приглушено; до поверхні — 8 : 1, з запасом. */ /* ── Палітра продукту (#231, вибрано варіант Б) ── Кольори бренду лишаються для знака, кнопок і великих поверхонь. Для тексту, статусів і позначок бренд-бук заблідий: його відтінки робились для айдентики, а тут дрібний текст лежить поверх супутника. Тож ті самі тони, але насиченіші. Порівняння, з якого вибирали, — у задачі. */ --brand-green-vivid: #12703E; /* зелений текст на світлому */ --brand-amber-vivid: #F2A516; /* бурштинова заливка під темний текст */ --brand-amber-deep: #834600; /* бурштиновий текст на світлому */ --brand-amber-tint: #FFEBC4; /* підкладка попереджень */ --brand-red-vivid: #B42318; /* «прострочено», помилка */ --brand-red-tint: #FDE2DE; --brand-red-glow: #FF9282; /* те саме на темному тлі */ /* Бурштин — врожай, попередження */ --brand-amber: #E0A040; /* Amber */ --brand-amber-900: #6B4510; --brand-amber-700: #8C5A12; /* бренд-бук, статус «Закінчується»; #B87C22 давав 3,3 : 1 */ --brand-amber-600: #E0A040; --brand-amber-500: #E8B463; --brand-amber-400: #EFC27E; --brand-amber-200: #F6DCAF; --brand-amber-100: #FAECD4; --brand-amber-50: #FDF6EA; /* Бурштин для темного тла — насиченіший за блідий -200, яким писали раніше: той читався як беж, а не як попередження. */ --brand-amber-glow: #F5B64A; --brand-amber-glow-light: #FFCF7A; /* Теракота — небезпека, ризик */ --brand-danger: #C8442C; /* Danger */ --brand-red-700: #A03420; --brand-red-500: #C8442C; --brand-red-400: #D96A55; --brand-red-300: #E89684; --brand-red-100: #F3D4CE; --brand-red-50: #FBEDEA; /* Приглушений сіро-зелений — службові дані */ --brand-info: #5A7268; /* Info */ --brand-slate-700: #3E514A; --brand-slate-500: #5A7268; --brand-slate-400: #7D9389; --brand-slate-300: #A3B4AB; --brand-slate-100: #DDE5E0; --brand-slate-50: #EDF1EE; /* Теплі нейтральні. Папір і льон замість холодного сірого — саме вони дають те відчуття, за яке бренд і впізнають. */ --brand-ink: #0E1A14; /* Ink */ --brand-linen: #F7F3EA; /* Linen */ --brand-paper: #FAF7F0; --neutral-0: #FFFFFF; --neutral-25: #FAF7F0; --neutral-50: #F7F3EA; --neutral-100: #EFEAD9; --neutral-150: #E8E3D6; --neutral-200: #D9D2BD; /* 400/500/700 — n-400/n-500/n-600 з бренд-буку. Раніше тут стояли вигадані сіро-зелені (#5A7268 — це Info, а не нейтральний): бренд задає теплі сірі, і зеленкуватий текст зливався з лісовими поверхнями. */ --neutral-400: #7E7765; --neutral-500: #4F4A3D; --neutral-700: #2E2A22; --neutral-900: #0E1A14; /* Нейтральні темної теми — графіт із ледь помітним зеленим відтінком. Свідомо не «майже чорні»: на чорному тлі інтерфейс читається як вимкнений, а не як темний. Фон піднято до рівня, де поверхні ще відрізняються одна від одної, а очі не ріже. До 2026-09-28 тут був лісовий зелений (#121C16, #1A261E…): зеленим ставав увесь екран, і акцент на ньому губився, а очі втомлювались. Тепер зелений — лише там, де він щось означає. */ --neutral-d-900: #141715; /* фон сторінки */ --neutral-d-800: #1C1F1D; /* поверхня: картки, панелі */ --neutral-d-700: #242826; /* вкладені поверхні */ --neutral-d-600: #2D322F; /* hover */ --neutral-d-500: #3E4541; /* бордери */ --neutral-d-550: #2A2E2C; /* тонкі роздільники */ --neutral-d-300: #646C67; /* Текстові щаблі. Раніше приглушений (#C8D0CB) майже не відрізнявся від основного, і головне на картці не виділялось. Тепер три чіткі сходинки; найблідший — 6,4 : 1 до поверхні, вище норми 4,5. */ --neutral-d-200: #9AA39E; --neutral-d-100: #C9CFCB; --neutral-d-50: #ECEFED; /* ══════════════════════════════════════════════════════════════════ РІВЕНЬ 2 — РОЛІ Єдине, що бачать компоненти. Темна тема перевизначає лише це. ══════════════════════════════════════════════════════════════════ */ /* ── Акцент (Primary) ── */ --color-primary-900: var(--brand-green-950); --color-primary-800: var(--brand-green-900); --color-primary-700: var(--brand-green-800); --color-primary: var(--brand-forest); /* основний */ --color-primary-500: var(--brand-green-500); --color-primary-400: var(--brand-green-400); --color-primary-200: var(--brand-green-200); --color-primary-100: var(--brand-green-100); --color-primary-50: var(--brand-green-50); --color-on-primary: var(--neutral-0); /* Зелений, яким пишуть, а не заливають. Окремо від --color-primary, бо кнопки лишаються брендовим Forest, а текст — насиченіший. */ --color-primary-text: var(--brand-green-vivid); /* ── Другорядний акцент (бурштин / врожай) ── */ --color-secondary-900: var(--brand-amber-900); --color-secondary-700: var(--brand-amber-deep); --color-secondary: var(--brand-amber-vivid); --color-secondary-500: var(--brand-amber-500); --color-secondary-200: var(--brand-amber-200); --color-secondary-100: var(--brand-amber-100); --color-secondary-50: var(--brand-amber-tint); /* Темний, а не білий: білий на бурштині давав 2,3 : 1. */ --color-on-secondary: var(--neutral-900); /* ── Третинний (дані / карта) ── */ --color-tertiary: var(--brand-slate-700); --color-tertiary-500: var(--brand-slate-500); --color-tertiary-100: var(--brand-slate-100); --color-tertiary-50: var(--brand-slate-50); --color-on-tertiary: var(--neutral-0); /* ── Помилка / ризик ── */ --color-error: var(--brand-red-vivid); --color-error-500: var(--brand-red-vivid); --color-error-100: var(--brand-red-100); --color-error-50: var(--brand-red-tint); --color-on-error: var(--neutral-0); /* ── Поверхні ── */ --color-background: var(--neutral-25); /* сторінковий фон */ --color-surface: var(--neutral-0); /* картки, панелі */ --color-surface-container: var(--neutral-50); /* вкладені поверхні */ --color-surface-variant: var(--neutral-100); /* hover-стани */ --color-outline: var(--neutral-200); /* бордери */ --color-outline-subtle: var(--neutral-150); /* тонкі роздільники */ /* ── Текст ── */ --color-text: var(--neutral-900); --color-text-secondary: var(--neutral-700); --color-text-muted: var(--neutral-500); --color-text-disabled: var(--neutral-400); /* ── Шрифт ── */ /* Три гарнітури з бренд-буку, кожна зі своєю роботою: Space Grotesk — заголовки й числа-герої (характер), Manrope — весь текст інтерфейсу (читомість), JetBrains Mono — кадастрові номери: моноширинний тримає колонку цифр рівною, і однакові за формою знаки не плутаються. */ --font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif; --font-family: 'Manrope', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Fira Code', monospace; /* Розміри (type scale). Нижня частина шкали — для щільних службових написів; основний текст інтерфейсу починається з --text-md. Аудиторія — агрономи, часто на сонці й на телефоні, тому дрібнішим за --text-sm не підписувати нічого, що треба прочитати. */ --text-xs: 10px; --text-sm: 11px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px; --text-4xl: 36px; /* Вага */ --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold:800; /* Міжрядковий інтервал */ --leading-tight: 1.2; --leading-normal: 1.5; --leading-loose: 1.7; /* ── Відступи (сітка 4px) ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ── Радіуси ── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 9999px; /* ── Тіні (MD3 elevation) ── */ --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04); --shadow-2: 0 2px 6px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05); --shadow-3: 0 4px 12px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06); --shadow-4: 0 8px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.07); /* ── Рух ── Тривалості й криві окремо: криву міняють рідко, тривалість — часто. Рух, який щось пояснює, лишається; декоративний — ні. Усе, що тут задано, має вимикатись через prefers-reduced-motion у компоненті. */ --transition-fast: 0.12s ease; --transition-normal: 0.20s ease; --transition-slow: 0.35s ease; --ease-out: cubic-bezier(.22, .61, .36, 1); /* виїзд, поява */ --ease-in-out: cubic-bezier(.4, 0, .2, 1); /* зміна стану */ --duration-1: 120ms; --duration-2: 200ms; --duration-3: 320ms; /* ── Шари (z-index) ── */ --z-base: 1; --z-raised: 10; --z-overlay: 100; --z-modal: 200; --z-toast: 300; --z-topbar: 400; /* ══════════════════════════════════════════════════════════════════ РІВЕНЬ 3 — КОМПОНЕНТНІ РОЗМІРИ Щоб «зробити щільніше» було одним рядком, а не пошуком по файлах. ══════════════════════════════════════════════════════════════════ */ /* Розкладка */ --topbar-height: 56px; --sidebar-width: 240px; --sidebar-collapsed: 56px; --content-max: 1440px; --content-padding: var(--space-6); --panel-width: 344px; /* бічні панелі карти */ /* Елементи керування */ --control-height: 36px; /* кнопка, поле, чип */ --control-height-sm: 28px; --control-height-lg: 44px; /* мінімальна ціль дотику */ --control-radius: var(--radius-sm); --row-height: 40px; /* рядок щільного списку */ --row-height-lg: 56px; /* рядок списку з підзаголовком */ /* Іконки — один розмір на призначення, а не піксель наздогад. Товщина штриха 1.8 — з бренд-буку; нею малюються всі іконки набору. */ --icon-stroke: 1.8; --icon-sm: 16px; --icon-md: 18px; --icon-lg: 20px; --icon-xl: 24px; /* Фокус — один вигляд на весь інтерфейс, інакше він губиться */ --focus-ring: 0 0 0 3px var(--color-primary-100); /* Смуга прокрутки. Доріжка прозора: панелі лежать на склі й супутнику, і будь-яка суцільна доріжка читалась би як чужа сіра планка. */ --scrollbar-thumb: var(--neutral-200); --scrollbar-thumb-hover: var(--neutral-400); /* ══════════════════════════════════════════════════════════════════ АКЦЕНТИ ФУНКЦІЙ Не частина базової палітри: це кольори, закріплені за конкретними сутностями продукту. Міняються разом із сутністю, а не з темою. ══════════════════════════════════════════════════════════════════ */ /* Нотатки */ --color-notes: #FF6B35; --color-notes-600: #F05A20; --color-notes-500: #F7931E; --color-notes-50: rgba(255, 107, 53, 0.08); --shadow-notes-1: 0 2px 4px rgba(255, 107, 53, 0.30); --shadow-notes-2: 0 4px 12px rgba(255, 107, 53, 0.30); --shadow-notes-3: 0 6px 16px rgba(255, 107, 53, 0.40); /* Строки договорів */ --color-progress-caution: #F4C84A; --color-progress-caution-end: #F8D870; --color-progress-warning: #FD7E14; --color-progress-warning-end: #FF8F30; --color-progress-critical: var(--color-error); --color-progress-critical-end: #E55353; --color-progress-expired: #7952B3; --color-progress-expired-end: #9265C0; /* Суборенда — бузковий, яким її позначають бейдж і чип у картці ділянки */ --color-sublease: #7E57C2; --color-sublease-strong: #4527A0; /* текст на світлій підкладці */ --color-sublease-50: #EDE7F6; /* Іконки панелей карти */ --color-icon-parcels: #7C4DFF; --color-icon-layers: #0288D1; --color-icon-bank: #00897B; /* Дані на карті: своє / чуже / вільне. Насиченіші за акцент бренду навмисно — лісовий зелений на супутниковому знімку зливається з полем. Пара «своє/чуже» перевірена валідатором палітри в обох темах: deutan ΔE 9.2, tritan 34.3, контраст понад 3:1. */ --color-map-mine: #3AA76D; --color-map-rival: #C43C3C; --color-map-free: #E2E7E3; --color-map-free-strong: #7F9187; /* Вибране на карті. Бірюзовий — бо його немає ні серед кольорів орендарів, ні на супутнику (жовта стерня, зелень, ґрунт); бурштин губився саме на жовтих орендарях. Темна обводка тримає лінію на білих вільних ділянках. */ --color-map-selected: #22D3EE; --color-map-selected-casing: #06222B; /* Вибране поле — окремим кольором від вибраної ділянки: ділянку в полі обводили тим самим бірюзовим, і межі двох контурів плутались. Фуксії немає ні серед сталих кольорів орендарів, ні на супутнику. */ --color-map-field-selected: #E879F9; /* Графіки Головної. Перевірено валідатором палітри dataviz у порядку сегментів «нова оренда → нові ділянки → передачі → зникла оренда»: CVD ΔE ≥ 13,5, звичайний зір ≥ 23,6. Бурштин на білому має контраст 2,2 : 1 — тому сегменти завжди з підписами-числами. Пара «ризик / можливість» (Банк, строки оренди): deutan ΔE 12,4, контраст ≥ 3 : 1. */ --chart-rent-new: #3D8B5F; --chart-parcels: #E0A040; --chart-transfer: #7E57C2; --chart-rent-lost: #B42318; --chart-risk: #B42318; --chart-opp: #00897B; --chart-free: #D9D2BD; /* ══════════════════════════════════════════════════════════════════ АЛІАСИ (сумісність зі старим кодом) bottom-nav.css звертається до цих імен; без них він падав на власні світлі fallback-значення і не слухався теми. ══════════════════════════════════════════════════════════════════ */ --color-border: var(--color-outline-subtle); --color-surface-2: var(--color-primary-50); } /* ════════════════════════════════════════════════════════════════════ ТЕМНА ТЕМА Вмикається атрибутом . Сторінка, яка його не ставить, лишається світлою — тож тема вмикається посторінково, у міру готовності. Перевизначаємо ЛИШЕ рівень ролей: розміри, шрифт, радіуси, рух спільні для обох тем. Якщо доводиться правити тут розмір — це означає, що роль названа неправильно. ════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { /* ── Акцент ── У темній темі шкала «перевернута»: 50/100/200 — це тьмяні підкладки й бордери, 700/800/900 — яскраві акценти. Завдяки цьому .btn-primary:hover (який бере -700) світлішає, а не темніє, як і належить на темному тлі. */ --color-primary-900: var(--brand-green-200); --color-primary-800: var(--brand-green-glow-light); --color-primary-700: var(--brand-green-glow-light); /* Акцент тут ще й текст («Обробляєте», активні кнопки), тож мірило — 4,5 : 1 до поверхні. Meadow давав 3,8. */ --color-primary: var(--brand-green-glow); --color-primary-500: var(--brand-green-500); --color-primary-400: var(--brand-green-400); /* Підкладки під нові нейтральні: трохи зеленіші за поверхню, не більше */ --color-primary-200: #2B4235; --color-primary-100: #1F2E25; --color-primary-50: #1A2520; --color-on-primary: #08110C; --color-primary-text: var(--brand-green-glow); /* ── Другорядний (бурштин) ── */ --color-secondary-900: var(--brand-amber-100); --color-secondary-700: var(--brand-amber-glow-light); --color-secondary: var(--brand-amber-glow); --color-secondary-500: var(--brand-amber-500); --color-secondary-200: #4A3418; --color-secondary-100: #2E2112; --color-secondary-50: #3A2A10; --color-on-secondary: #1A1006; /* ── Третинний (дані / карта) ── */ --color-tertiary: var(--brand-slate-300); --color-tertiary-500: var(--brand-slate-400); --color-tertiary-100: #1A2E3D; --color-tertiary-50: #14232E; --color-on-tertiary: #06121C; /* ── Помилка ── */ --color-error: var(--brand-red-glow); --color-error-500: var(--brand-red-glow); --color-error-100: #4A1F1D; --color-error-50: #401B17; --color-on-error: #1A0908; /* ── Поверхні ── */ --color-background: var(--neutral-d-900); --color-surface: var(--neutral-d-800); --color-surface-container: var(--neutral-d-700); --color-surface-variant: var(--neutral-d-600); --color-outline: var(--neutral-d-500); --color-outline-subtle: var(--neutral-d-550); /* ── Текст ── */ --color-text: var(--neutral-d-50); --color-text-secondary: var(--neutral-d-100); --color-text-muted: var(--neutral-d-200); --color-text-disabled: var(--neutral-d-300); /* ── Тіні ── На темному тлі підйом читається гірше, тому тіні глибші. */ --shadow-1: 0 1px 2px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.30); --shadow-2: 0 2px 6px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.35); --shadow-3: 0 4px 12px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.35); --shadow-4: 0 8px 24px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.40); /* ── Фокус ── */ --focus-ring: 0 0 0 3px var(--color-primary-200); --scrollbar-thumb: var(--neutral-d-500); --scrollbar-thumb-hover: var(--neutral-d-300); /* ── Акценти статусів / прогресу ── Освітлені, щоб лишались читабельними на темному. */ --color-progress-caution: #F7D97A; --color-progress-caution-end: #FBE59B; --color-progress-warning: #FF9A4D; --color-progress-warning-end: #FFB070; --color-progress-critical: var(--color-error); --color-progress-critical-end: #FF9E96; --color-progress-expired: #A88BD4; --color-progress-expired-end: #BCA5E0; /* ── Нотатки / іконки карти ── */ --color-notes: #FF8A5C; --color-notes-600: #FF7A45; --color-notes-500: #FFA860; --color-notes-50: rgba(255, 138, 92, 0.12); /* Суборенда: темний текст на бузковому ставав темним по темному */ --color-sublease: #B39DDB; --color-sublease-strong: #D1C4E9; --color-sublease-50: #2A2238; --color-icon-parcels: #A98BFF; --color-icon-layers: #4FB3E8; --color-icon-bank: #4DB6AC; /* ── Дані на карті ── Своє й чуже лишаються ті самі: вони лежать на супутниковому знімку, а не на поверхні інтерфейсу, тож від теми не залежать. Змінюється лише нейтральне «вільне», бо воно живе в панелях. */ --color-map-free: #333B36; --color-map-free-strong: #6B7A71; /* Графіки Головної в темній темі — свої кроки, не «перевернуті» світлі: перевірено на поверхні #1C1F1D, смуга світлоти 0,48–0,67. Бурштин і зелений поруч для protan мають ΔE 7,1 — дозволено лише з другим кодуванням, тож сегменти розділені проміжком і підписані */ --chart-rent-new: #3E9A66; --chart-parcels: #C4861B; --chart-transfer: #9575CD; --chart-rent-lost: #E0533F; --chart-risk: #E0533F; --chart-opp: #26A69A; --chart-free: #4A544E; }