/* ============================================================================ Hygge Hoodie CORE — дизайн-токени ---------------------------------------------------------------------------- Тут лише значення. Жодного компонента, жодного селектора крім :root і теми. Компонент, який пише колір або відступ числом замість токена, — помилка: через пів року його не знайти, коли палітра зміниться. Джерело кольорів — брендбук Hygge Hoodie 2025 (design/brand/brandbook.pdf). Два основні: #4F3529 Dark Chocolate, #FCFAF2 Milky White. Другорядні: #191919, #ADBFD0, #FCF9F1, #234F30, #636363. ТЕМА ЗА ЗАМОВЧУВАННЯМ — ТЕМНА. Це рішення, а не мода: основний польовий сценарій — менеджер увечері після концерту, з телефона, у темряві. Світла тема лишається для десктопа власника, бухгалтера й друку. ========================================================================= */ :root { /* -------------------------------------------------------------------- 1. Брендові константи. Не змінюються між темами — це сам бренд. -------------------------------------------------------------------- */ --brand-chocolate: #4f3529; --brand-milk: #fcfaf2; --brand-ink: #191919; --brand-sky: #adbfd0; --brand-forest: #234f30; --brand-stone: #636363; /* Розділ X (instruction-x-section-rebrand.md §1) — четвертий брендовий колір, з'являється лише в контексті X: логотип/акцентна лінія на кожній сторінці розділу, кабінет тур-менеджера. Не семантичний (ok/warn/danger) — не змінюється між темами так само, як решта брендових констант вище. */ --x-moss: #3a422d; --x-moss-dark: #2c321f; --x-moss-tint: rgba(58, 66, 45, 0.06); --x-moss-tint-strong: rgba(58, 66, 45, 0.10); /* -------------------------------------------------------------------- 2. Поверхні (темна тема — базова). Коричневий бренду #4F3529 НЕ став тлом застосунку напряму, і це свідомо. Він насичений і світлий як для фону: на ньому лишається замало контрастного запасу, щоб розкласти чотири рівні поверхні, межі й неактивний текст — усе злипається в одну пляму. Тому тло — та сама коричнева гама, але глибша й приглушена, а сам #4F3529 працює як брендова поверхня (шапка, вибраний пункт меню, лого-плашка). Тепло від цього нікуди не зникає: уся шкала має відтінок 20°, ніде немає нейтрального сірого. -------------------------------------------------------------------- */ --bg: #16110e; /* тло застосунку */ --surface: #1e1815; /* картка, таблиця, панель */ --surface-raised:#2a211c; /* модалка, дропдаун, шит — те, що «над» */ --surface-sunken:#120e0b; /* поле вводу, поглиблення */ --surface-hover: #2f251f; --surface-active:#382c24; --surface-brand: #4f3529; /* брендова плашка */ --border: #3a2e27; /* звичайна межа */ --border-strong: #55443a; /* межа поля вводу — має бути видно втомленому оку */ --border-faint: #291f1a; /* розділювач у списку */ /* -------------------------------------------------------------------- 3. Текст. Три рівні, не більше: заголовок/значення, підпис, вимкнене. Четвертий рівень завжди означає, що на екрані забагато всього. -------------------------------------------------------------------- */ --text: #fcfaf2; /* молочний бренду — 15.8:1 на --bg */ --text-muted: #c2b3a7; /* 8.4:1 — підписи, службове */ --text-faint: #8d7d71; /* 4.6:1 — плейсхолдер, вимкнене; НЕ для даних */ --text-on-brand: #fcfaf2; --text-inverse: #16110e; /* текст на світлій кнопці */ /* -------------------------------------------------------------------- 4. Акцент і дія. Первинна дія — молочна кнопка з темним текстом. Найвищий контраст на екрані дістається тому, що людина прийшла зробити («Зберегти»), а не декору. Блакитний бренду — інтерактивність без дії: посилання, фокус, виділення, інформація. Він світлий, тому на темному читається, а на світлій темі темнішає (див. блок теми). -------------------------------------------------------------------- */ /* Колір логотипа — окремий токен, а не --text. Це правило брендбука: на темному фоні лого молочне, на світлому — брендове коричневе. Якщо брати колір тексту, на світлій темі лого стає майже чорним (--text там #2a1d16), тобто перестає бути брендовим кольором. */ --logo: var(--brand-milk); --accent: #adbfd0; --accent-hover: #c3d1de; --accent-quiet: #1c2630; /* підкладка інформаційного блоку */ --accent-contrast: #16110e; /* текст на акцентній заливці */ --action-bg: #fcfaf2; --action-bg-hover: #ffffff; --action-fg: #16110e; /* -------------------------------------------------------------------- 5. Семантика. Зелений і блакитний — брендові, зсунуті у світлий бік, щоб читатись на темному. Бурштиновий і теракотовий бренд не дає — вони додані, бо «увага» й «помилка» без свого кольору не працюють. Обидва свідомо відведені від #4F3529 по світлоті: три теплі коричнево-червоні поруч увечері на телефоні перестають відрізнятись. -------------------------------------------------------------------- */ --ok: #7fb287; --ok-quiet: #1a2a1f; --ok-border: #2f5b3a; --warn: #dfa94b; --warn-quiet: #2c2214; --warn-border: #6b5122; --danger: #e5806b; --danger-quiet: #2e1a16; --danger-border: #6e372c; --info: #adbfd0; --info-quiet: #1c2630; --info-border: #3b4d5e; /* Бурштиновий "чужий склад" (instruction-catalog-tree.md §4) — окремий від --warn: партнерська локація не сигналізує проблему, лише "не наше". Значення взяті дослівно з mockup-catalog-tree.html (--amber-tx). */ --amber-tx: #E3B370; --amber-bg: #3A2C18; /* Блок «Завдання» (власник, 26.09.2026) — власний фон, щоб блок завдань упізнавався однаково на кожній картці, у «Моєму дні», на Головній і в плашці «До діла (N)» у шапці. «Морська хвиля» (рішення власника 26.09.2026, варіант B — замість тимчасового бузку): решта кола вже має значення — жовтий/бурштиновий — увага (--warn, --amber-*), зелений — успіх (--ok), теракотовий — помилка (--danger), сіро-блакитний — акцент/інформація (--info, --accent), мох — X. Бірюза стоїть між зеленим і блакитним, але темніша/насиченіша за обидва й читається окремим тоном. Темна тема — глибока морська хвиля. Текст усередині блоку — теж з гами (--task-text/--task-text-muted/--task-text-faint; клас підміняє ними --text/--text-muted/--text-faint, components.css .hh-tasks-surface). Контраст (WCAG) на --task-surface: текст 12.8:1, другорядний 9.4:1, faint 7.0:1. */ --task-surface: #15272a; --task-border: #2c4a48; --task-text: #d6efea; --task-text-muted: #a6d3ca; --task-text-faint: #86b8ae; /* Чип «X: <партнер>» / X-канал (.hh-chip--x, components.css). Той самий тонований патерн, що --ok-quiet/--ok-border/--ok: світліший текст на глибокій підкладці з тонкою рамкою, — але тон мохово-оливковий (від --x-moss, ~80°), не зелений --ok (~130°), щоб X лишався впізнаваним серед чипів каналу. Власник 02.10.2026: суцільна заливка --x-moss з молочним текстом «дуже ріже в очі». Контраст тексту на підкладці 9.7:1. */ --x-chip-text: #c9d1b2; --x-chip-bg: #22261a; --x-chip-border: #444d33; /* Чип каналу-вітрини «Новий сайт» (.hh-chip--storefront, components.css; власник 03.10.2026). Лаванда (~248°, власник 05.10.2026 замість рожевого), тим самим тонованим патерном, що --x-chip-*: окремий тон серед чипів каналу, не --danger і не жовті попередження. */ --storefront-chip-text: #cfc9f0; --storefront-chip-bg: #24213a; --storefront-chip-border: #4a4470; /* Гроші. Мінус має бути видно без читання знака — але не кричати червоним: від'ємна маржа це факт, а не аварія. */ --money-neg: #e5806b; --money-pos: #7fb287; /* -------------------------------------------------------------------- 6. Типографіка. Neutral Face — фірмовий, для заголовків і чисел-героїв. Montserrat — основний текст. Обидва лежать у design/fonts і підключаються в fonts.css, а не з CDN: у полі інтернет поганий, і чекати на шрифт, щоб побачити суму, — неприйнятно. Montserrat у стеку --font-display стоїть НЕ як запасний варіант, а як джерело гліфів, яких у Neutral Face немає: гривні (₴) і математичного мінуса (−). Прибрати його зі стека — і сума в заголовку показника втратить валюту. -------------------------------------------------------------------- */ --font-display: "Neutral Face", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --font-text: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace; /* Кроки шкали. Мобільні значення — базові; десктоп підіймає (див. кінець). Зменшено 28.08.2026 (issue #729): заголовок сторінки (.hh-section-title) виводився занадто великим і жирним — Роман показав скріншот "УСІ ПРОДАЖІ". Клас спільний на ~40+ екранах (той самий патерн, що #714 із чипами фільтрів), тому крок зменшено в самій шкалі, а не на екрані. display/h1/h2 зсунуті на один крок вниз усі разом, щоб ієрархія заголовок сторінки → заголовок секції в картці лишалась пропорційною; h3/body/small/caption не чіпали — вони не були завеликими. Зменшено ще раз 30.08.2026 (issue #932, docs/design-code-core.md §2): таблиця розділу 2 фіксує заголовок сторінки рівно 20px/700 незалежно від брейкпоінта — попередній крок (24/30 мобільний, 30/36 десктоп) усе ще був суттєво більшим за це значення на живому скріншоті "УСІ ПРОДАЖІ". --size-display тепер дорівнює --size-h1 (20/26) в обох брейкпоінтах, десктопний @media-блок нижче більше не піднімає display окремо. */ --size-display: 1.25rem; --lh-display: 1.625rem; /* 20/26, було 24/30 */ --size-h1: 1.25rem; --lh-h1: 1.625rem; /* 20/26, було 22/28 */ --size-h2: 1.0625rem;--lh-h2: 1.4375rem; /* 17/23, було 18/24 */ --size-h3: 1rem; --lh-h3: 1.375rem; /* 16/22 */ --size-body: 0.9375rem;--lh-body: 1.4375rem; /* 15/23 */ --size-small: 0.8125rem;--lh-small: 1.125rem; /* 13/18 */ --size-caption: 0.75rem; --lh-caption: 1rem; /* 12/16 */ --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* Розрідження для великих капсових написів — бренд пише заголовки капсом, а капс без трекінгу читається як стіна. */ --tracking-caps: 0.06em; --tracking-tight: -0.01em; /* -------------------------------------------------------------------- 7. Ритм. Крок 4px. Повітря живе у відступах МІЖ блоками, а не в роздутих полях: поле має бути великим на дотик, а не просторим. -------------------------------------------------------------------- */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ /* -------------------------------------------------------------------- 8. Форма. Радіуси м'які, але не «таблеткові»: логотип бренду вже дуже округлий, і якщо все навколо теж кругле, зникає сітка, по якій око читає таблицю. -------------------------------------------------------------------- */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-full: 999px; /* Мінімальна ціль дотику. 44px — не рекомендація, а межа, нижче якої втомлений палець у темряві промахується. */ --touch: 44px; --border-w: 1px; --focus-w: 2px; /* -------------------------------------------------------------------- 9. Тіні. На темній темі тінь майже не працює — глибину дає межа й світліша поверхня. Тому тіні мінімальні й лише для «плаваючого». -------------------------------------------------------------------- */ --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-overlay: 0 24px 60px rgba(0, 0, 0, 0.6); /* -------------------------------------------------------------------- 10. Рух. Швидко й непомітно. Анімація тут не прикраса, а підказка, що система відповіла. -------------------------------------------------------------------- */ --dur-fast: 120ms; --dur: 180ms; --dur-slow: 280ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); /* -------------------------------------------------------------------- 11. Шари. -------------------------------------------------------------------- */ --z-sticky: 10; --z-nav: 20; --z-overlay: 30; --z-modal: 40; --z-suggest: 45; /* підказка автозаповнення (.hh-suggest) — над модалкою, під тостом */ --z-toast: 50; /* -------------------------------------------------------------------- 12. Розкладка. -------------------------------------------------------------------- */ --content-max: 1280px; --form-max: 560px; /* довший рядок форми = більше промахів */ --prose-max: 68ch; --nav-w: 248px; /* бічне меню на десктопі */ --tabbar-h: 64px; /* нижня панель на телефоні */ --topbar-h: 56px; } /* ============================================================================ Світла тема. Не інверсія темної, а окремий набір значень. Тут працює пряме правило брендбука: молочний фон + коричневий текст і коричневе лого. Первинна дія стає коричневою кнопкою з молочним текстом — це найбрендовіший стан системи, тому світла тема лишається для десктопа, демонстрацій і друку. ========================================================================= */ [data-theme="light"] { --bg: #fcf9f1; --surface: #ffffff; --surface-raised:#ffffff; --surface-sunken:#f6f2e8; --surface-hover: #f4efe4; --surface-active:#ece5d7; --surface-brand: #4f3529; --border: #e3dacc; --border-strong: #c9bcaa; --border-faint: #efe9dd; --text: #2a1d16; --text-muted: #6b594c; --text-faint: #93826f; --text-on-brand: #fcfaf2; --text-inverse: #fcfaf2; --logo: var(--brand-chocolate); --accent: #4a6479; --accent-hover: #395064; --accent-quiet: #e9eef3; --accent-contrast: #fcfaf2; --action-bg: #4f3529; --action-bg-hover: #3d281f; --action-fg: #fcfaf2; --ok: #23623a; --ok-quiet: #e7f0e8; --ok-border: #a8c9ad; --warn: #8a6212; --warn-quiet: #f8efdb; --warn-border: #dcc188; --danger: #a8412c; --danger-quiet: #f8e7e2; --danger-border: #e0b0a4; --info: #4a6479; --info-quiet: #e9eef3; --info-border: #b7c6d3; --amber-tx: #7A4B18; --amber-bg: #FBEBD9; /* Блок «Завдання» — «морська хвиля», світла (варіант B власника, 26.09.2026): фон #e3f1ee, рамка #a7d2c9, текст #1b4d45 (8.2:1), другорядний #2f6e63 (5.1:1), faint #35736a (4.7:1 — звичайний --text-faint тут був би нижче AA). */ --task-surface: #e3f1ee; --task-border: #a7d2c9; --task-text: #1b4d45; --task-text-muted: #2f6e63; --task-text-faint: #35736a; /* Чип X — світла тема: текст сам бренд-мох --x-moss, підкладка м'яка шавлієва, рамка тонка (як --ok-border). Контраст 9.1:1. */ --x-chip-text: #3a422d; --x-chip-bg: #eef0e6; --x-chip-border: #c5cbb3; /* Чип каналу-вітрини — світла тема: темно-лавандовий текст на м'якій лавандовій підкладці (власник 05.10.2026). */ --storefront-chip-text: #463d78; --storefront-chip-bg: #eceaf5; --storefront-chip-border: #c3bddd; --money-neg: #a8412c; --money-pos: #23623a; --shadow-raised: 0 4px 16px rgba(42, 29, 22, 0.10); --shadow-overlay: 0 20px 50px rgba(42, 29, 22, 0.18); } /* ============================================================================ Десктоп: більший кегль заголовків. Тіло тексту НЕ росте — 15px читається однаково добре, а роздутий базовий кегль з'їдає рядки таблиці, заради яких десктоп і потрібен. ========================================================================= */ @media (min-width: 768px) { :root { /* --size-display НЕ підіймається на десктопі (issue #932, docs/design-code-core.md §2): заголовок сторінки — фіксовано 20px, незалежно від брейкпоінта, це пряма вимога таблиці розділу 2, а не крок шкали, що росте разом з h1/h2. Успадковує 1.25rem/1.625rem із :root вище. */ --size-h1: 1.5rem; --lh-h1: 1.875rem; /* 24/30, було 26/32 */ --size-h2: 1.125rem; --lh-h2: 1.5rem; /* 18/24, було 20/26 */ --touch: 36px; /* миша точніша за палець */ } } /* Людина попросила менше руху — виконуємо, а не «пом'якшуємо». */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } }