/* tapki.kh.ua — design-токени бренду для CSS-споживачів. Єдине джерело правди фронту. Споживачі: hero.css, tapki-theme.css, content-blocks.css, content-typography.css, catalog-chips.css, catalog-content.css, product-card.css, product-specs.css, account.css. Підключається ПЕРШИМ (залежність для всіх). ⚠ УВАГА до формату файлу: НЕ писати всередині коментарів послідовність «зірочка+слеш» у прикладах шляхів (типу catalog-<зірочка>/product) — вона достроково закриває коментар, і решта тексту перестає бути коментарем. Саме така помилка тут була до 2026-08-04. ⚠ Блок токенів нижче ЧИТАЄТЬСЯ PHP-ом і дублюється інлайном у — tapki_tokens_inline_css() в inc/enqueue-assets.php. Причина: RUCSS вирізає визначення токенів з used-css (не бачить зв'язку «визначення ↔ вживання»), і тоді КОЖНЕ вживання без fallback стає невалідним, а правило падає цілком. Інлайн із маркером-виключенням тримає токени на сторінці завжди. Наслідки для правок: — значення правиш ТУТ, інлайн підхопить сам (у PHP значення НЕ дублюються); — селектор блоку тримати простим, без вкладених фігурних дужок — його бере regex; — після зміни — чистка кешу WP Rocket, інакше в head лишиться старий інлайн. ⚠ PHP-модулі, що емітують inline-стилі у head (live-search, sample-popup, np-shipping, email), НЕ дотягуються до CSS-змінних → беруть ті самі значення з inc/brand-palette.php (tapki_palette()). Ці два файли — дзеркала одного бренд-кольору (DRY §4): міняєш зелений — прав ОБИДВА. */ :root{ --tapki-green:#23856D; /* primary / акцент */ --tapki-green-hover:#1c6a57; /* secondary / hover */ --tapki-green-tx:#2e7564; /* зелений текст-акцент (= green-600, 5.46:1 на білому) */ /* Роль «світле зелене тло». ⚠ Значення НЕ дублюється: це посилання на ступінь шкали. Було два майже однакових світлих (#eef7f0 і #f1f9f3) під різними іменами — очима невідрізнимі, але це два джерела правди. Зведено 2026-08-09. */ --tapki-green-bg:var(--tapki-green-50); /* Повна зелена шкала — дзеркало figma-make-export/theme.css (Фаза 13/R1, джерело глибини). ⚠ 2026-08-24: ЯДРО БРЕНДУ ЗМІНЕНО. Джерело — референс власника (Figma-кіт E-commerce UI, стиль secondary-color-1): #23856D. Логотип ПІДІГНАНО під цей колір, а не навпаки: у файлі uploads/2026/06/tapki-logo-slipper.png перефарбовано тільки заливку, форма й білий тапочок не змінені. Тому міряти логотип, щоб «відновити» бренд-колір, більше НЕ МОЖНА — він тепер наслідок, а не джерело. До 24.08 діяло інше рішення (09.08): ядром був колір логотипа #55a870, заміряний із того ж файлу по 3139 пікселях плашки; старий сайт мав світліший #64b786 і був відхилений. ⚠ Заміри контрасту перераховані під новий колір: білий текст на #23856D дає 4.52 — норма AA для звичайного тексту пройдена. На старому #55a870 було 2.91, тобто нижче норми, і саме заради цього компромісу існувала окрема роль --tapki-green-cta. Зараз вона не потрібна, але лишена як готова сходинка. ПОПЕРЕДНЯ ПАЛІТРА — щоб повернутися без розкопок в історії: green #55a870 · hover #3f9059 · tx/600 #2e7545 · 50 #f1f9f3 · 100 #d4ecda 200 #a8d8b4 · 300 #75be8b · 700 #1d5430 · cta #3d845a · cta-hover #34714c on-dark #55a870 · theme_mods: primary/success/topbar_bg #55a870, secondary #3f9059 Повний порядок відкату — decisions/ADR-007-brand-green.md. */ --tapki-green-50:#f1f9f7; --tapki-green-100:#d4ece6; --tapki-green-200:#a8d8cc; --tapki-green-300:#75beac; --tapki-green-400:#23856D; --tapki-green-500:#1c6a57; --tapki-green-600:#2e7564; --tapki-green-700:#1d5447; /* Зелений для тексту НА ТЕМНОМУ тлі. Це рівно ядро старого сайту #64b786: на темній секції (#2c2c2c) воно дає 5.76 і виглядає як на фото, тоді як текстовий #2e7564 там 2.56 — нечитабельно. Роль окрема саме тому, що значення залежить від тла, а не від бренду. */ --tapki-green-on-dark:#64b786; /* Заливка на крок темніша за ядро. ⚠ 09.08 рішенням власника кнопки переведені на САМЕ ЯДРО заради єдиної схеми з плитками, тож зараз ці два токени в CSS не використовуються. Лишені як готова сходинка: якщо колись знадобиться підняти контраст кнопок — міняється одне місце. */ --tapki-green-cta:#3d8473; --tapki-green-cta-hover:#347162; --tapki-neutral:#f6faf7; /* тепла нейтраль тлом секцій */ --tapki-text:#2d3436; /* основний текст */ --tapki-ink:#111827; /* насичений текст (заголовки) */ --tapki-ink2:#4b5563; /* вторинний текст */ --tapki-gray:#6b7280; /* приглушений */ /* Нейтральна шкала (se1b Mi2). Доти цих значень не було в палітрі взагалі — кожен файл заводив свій сірий, і їх набралося чотири на майже однакову роль: #8a8a8a, #8a9099, #777, #666. Спершу значення лишались різними (питання дизайну, не архітектури). Але замір контрасту показав, що ОБИДВА не проходять поріг для дрібного тексту — #8a8a8a давав 3.45:1, #8a9099 3.22:1 при нормі 4.5. Піднявши обидва до найсвітлішого прохідного сірого, ми й отримали одне значення: тут його продиктувала доступність, а не смак. Ролі лишаються різними — якщо дизайн колись розведе відтінки, розводити треба вище 4.5:1. ⚠ Дзеркало для PHP-модулів, які емітують inline-стилі, — inc/brand-palette.php: у листи, PDF і адмінку CSS-змінні не доїжджають. */ --tapki-gray-mute:#6b7280; /* приглушений вторинний текст; 4.83:1 — було #8a8a8a (3.45:1) */ --tapki-gray-bc:#6b7280; /* хлібні крихти; 4.83:1 — було #8a9099 (3.22:1) */ --tapki-gray-dim:#666; /* дрібні службові підписи */ --tapki-gray-bg:#f9fafb; /* світлий фон комірок */ --tapki-border:#e5e7eb; /* межі */ /* Семантика станів заказу. НЕ бренд-кольори, але живуть тут із тієї ж причини, що й решта: їх споживають ДВА різні подання одного знання — таблиця WooCommerce у кабінеті і бейджі-пілюлі в картках заказів. Доти кожне подання тримало власні літерали, і вони вже розійшлися: «Виконано» був #2e7d32 у таблиці й #2f7d4a у бейджі (se1b Mi3). Один токен на стан робить розходження неможливим. Тут же вони автоматично переживають RUCSS. */ --tapki-status-wait:#8a8a8a; /* очікує оплати / утримання */ --tapki-status-work:#2f7d4a; /* в обробці */ --tapki-status-pack:#b8791a; /* комплектується */ --tapki-status-ship:#2b6cb0; /* відправлено */ --tapki-status-done:#2e7d32; /* виконано */ --tapki-status-fail:#c0392b; /* скасовано / не вдалося */ --tapki-status-off:#666; /* повернено / невідомий */ --tapki-radius:8px; /* скруглення */ --tapki-font-head:'Montserrat',sans-serif; /* заголовки */ --tapki-font-body:'Open Sans',sans-serif; /* текст */ }