/* ─────────────────────────────────────────────────────────────────────────── */ /* OPONYTOMY — design tokens */ /* */ /* Джерело: `специфікація 1. OponyToMy.md` + `кнопки. OponyToMy 2.html` */ /* (дизайнерський handoff, mobile-390 prototype). */ /* */ /* Sibling до Inforeisen. Імена токенів збігаються з `new/css/main.css :root` */ /* v44 набором — той самий шаблон працює під обома брендами, змінюється */ /* тільки цей файл під siteId=2. */ /* */ /* Ключова відмінність від Inforeisen'івської teal-системи: */ /* - палітра тільки на 3 кольорах (чорний / білий / accent-red) */ /* - accent зарезервований ВИКЛЮЧНО під Primary CTA */ /* - «Кольорові лінки» / другорядні дії → --text-muted, ніколи accent */ /* - --status-success (зелений) — єдиний виняток, тільки для «в наявності» */ /* ─────────────────────────────────────────────────────────────────────────── */ :root { /* ── ACCENT (Primary CTA states) ───────────────────────────────────────── */ /* 2026-08-05: --accent-hover повернуто за design system §9.1 — OTM Primary hover робить background swap на цей токен (не filter, як INFR). */ --accent-primary: #B41522; /* default */ --accent-primary-rgb: 180, 21, 34; /* rgb() companion — used in header hairline / icon-btn hover tint (DS §9.12) */ --accent-hover: #CC1A28; /* :hover — світліший за default (design system §9.1, §2.2) */ --accent-pressed: #8A0F19; /* :active — темніший */ --accent-disabled-bg: #C8A3A6; /* :disabled — десатурований */ --accent-disabled-text: rgba(250, 250, 250, 0.65); --on-accent: #FAFAFA; /* текст поверх accent */ /* ── TEXT ──────────────────────────────────────────────────────────────── */ /* Затемнено 2026-08-24 per DS §2.1 + §16.3 (WCAG 1.4.3). Старі значення не проходили AA: --text-placeholder 3.31:1, --text-muted 3.17:1 на --bg-page. Нові дають 4.54 / 4.54 — затемнення в HLS зі збереженням відтінку. ⚠ Наслідок для §2.1: до цієї правки приглушена трійка OP збігалась повністю (#8A8A8A), тож твердження «усі три рівні» більше не чинне — --text-muted тепер #707070, а --text-placeholder/--text-subtle #767676. Звуження палітри до трьох ролей (--text-on-light = --text-default) лишається чинним. */ --text-default: #282424; /* аліас до on-light (Inforeisen main.css узує обидва) */ --text-on-light: #282424; --text-muted: #707070; /* було #8A8A8A */ --text-placeholder: #767676; /* було #8A8A8A */ --text-subtle: #767676; /* було #8A8A8A */ --text-inverted: #FAFAFA; /* DS §3 line 1826 — muted-on-dark. --text-muted (#8A8A8A) on --bg-chip (#282424) contrasts 3.4:1, below readable threshold. This token replaces it wherever muted text sits on the dark OP header/chip surfaces (nav-links in centered menu per §9.12 line 3051). Contrast ≈ 8:1. */ --text-inverted-muted: rgba(250, 250, 250, 0.58); /* ── SURFACES ──────────────────────────────────────────────────────────── */ --bg-page: #F5F5F5; --bg-surface-light: #FAFAFA; --bg-surface-elevated: #FAFAFA; /* DS §9.12 — pill actions bg on OTM (muted-white, not pure — per §2.3, elevation on dark reads through muted white) */ --bg-input: #FAFAFA; --bg-chip: #282424; /* темні заливки чипів + EU-бейджів */ --bg-subtle: #FAFAFA; /* DS §2.3 (2026-08-21, admin-scope) — затемнення сторінки під відкритим оверлеєм (дропдаун статусу, панель історії). --color-bg-surface-overlay є, але заскоуплений лише на Home (home_new.css, §13) і поза Home недоступний. Значення — rgba від --bg-chip з альфою .12. Для Inforeifen — TBD. */ --bg-scrim: rgba(40, 36, 36, .12); /* Chip selected state — DS §chip виняток для OTM: bg = --bg-chip (dark), text = --text-inverted (white), border same as bg (invisible). Ніяких червоних (accent-primary reserved for Primary CTA per §2.2/§10.3). */ --chip-selected-fg: var(--text-inverted); --chip-selected-border: var(--bg-chip); /* ── BORDERS ───────────────────────────────────────────────────────────── */ /* #DDD8D4 → #cdc6c0 per DS §16.4 (23.08.2026). Відтінок і насиченість збережені (H 27°, S 12%), змінена лише світлість 85% → 78%. Це рішення про ВИГЛЯД, не про доступність: поле OP стоїть на майже однаковій зі сторінкою заливці (#FAFAFA на #F5F5F5 = 1.04:1), і при світлій рамці контур читався розмито. 1.4.11 це НЕ закриває (1.62/1.55 при порозі 3:1) — борг лишається відкритим свідомо, розбір чотирьох механізмів межі у §16.4. */ --border-default: #cdc6c0; /* було #D9D9D9 */ --border-subtle: #ECECEC; /* design system §2.4 (2026-08-10) — hover непофарбованих outline-елементів (Qty-степер §9.3) */ --card-border: #E5E5E7; /* зовнішня обводка карток (замість тіні) */ --border-surface: #E5E5E7; /* аліас — Inforeisen main.css узує це ім'я */ --border-on-surface: rgba(10, 10, 10, .12); /* DS §9.12 — subtle divider inside pill surfaces (lang-divider) */ --border-module: rgba(107, 114, 128, 0.4); /* legacy — не в спеці, лишаю */ /* DS §2.4 (2026-08-21, admin-scope) — роздільник на ТЕМНІЙ поверхні. Жоден із наявних токенів меж (#cdc6c0 / #ECECEC / #E5E5E7) на фоні #282424 не читається як хейрлайн — усі надто світлі. Застосування: вертикальний роздільник у темному хедері, роздільники рядків усередині темного тултипа. Значення для Inforeifen — TBD (див. §2.1: свідомо OP-only, не недорахований). */ --border-on-dark: rgba(250, 250, 250, .16); /* ── STATUS (семантика, поза брендом) ──────────────────────────────────── */ /* УНІФІКОВАНО З INFOREIFEN 2026-08-24 per DS §2.5 (рішення 22.08) + кандидат B (23.08). Значення мусять бути ІДЕНТИЧНІ inforeisen/tokens.css — статус це стан даних, а не голос бренду: замовлення однаково скасоване на обох сайтах. Попередні пари відрізнялись косметично й безпідставно (#1A6E63 проти #4F7A52 — 5 одиниць в одному каналі); жодна різниця не читалась як брендування. Брендування лишається в --accent-primary, --bg-chip і формі компонентів. Було 60 hex на синхронізацію вручну, стало 30. ⚠ Правити ці 12 рядків ТІЛЬКИ разом з Inforeifen. */ --status-success: #1A6E63; /* було #4F7A52 */ --status-success-soft: #f0f7f6; /* було #EDF2EC */ --status-success-ink: #bedad6; /* було #375C3A */ --status-warning: #8a6a3d; /* було #8C6A34 */ --status-warning-soft: #f6f0e6; /* було #F5EEDD */ --status-warning-ink: #e3d4b8; /* було #6B4F24 */ /* ⚠ OP-специфіка: --status-danger (#b3261e) і --accent-primary (#B41522) — контраст 1.05:1, тобто фізично один колір. Тому danger-стан на Oponytomy МУСИТЬ нести другий носій (форма, іконка, подвоєна рамка, текст), а не лише колір — §2.5 «Error-стан у формах». */ --status-danger: #b3261e; /* було #9E4A34 */ --status-danger-soft: #f6eeee; /* було #F5E3DC */ --status-danger-ink: #e3cfcf; /* було #7A3323 */ --status-info: #5a708a; /* було #4E6C86 */ --status-info-soft: #eef1f5; /* було #E7ECF1 */ --status-info-ink: #d3dce6; /* було #37506A */ /* ── FOCUS RING ────────────────────────────────────────────────────────── */ --focus-ring: 0 0 0 3px rgba(180, 21, 34, 0.32); --focus-ring-inset: inset 0 0 0 2px rgba(180, 21, 34, 0.55); /* DS §9.22 — темна нейтральна поверхня системного повідомлення. Значення збігається з --text-on-light (Oponytomy), і спокуса написати background: var(--text-on-light) велика. Робити так НЕ можна: це рівно та помилка, яку §9.15 виправляв 10.08.2026, коли крапка радіо-картки брала колір із текстового токена замість статусного. Текстовий токен, використаний як поверхня, ламається при першій же зміні палітри. Поверхня має власну роль — отже, власне ім'я. */ --bg-notice: #282424; /* ── SHADOWS ───────────────────────────────────────────────────────────── */ --shadow-1: 0 1px 2px rgba(40, 36, 36, 0.06), 0 1px 1px rgba(40, 36, 36, 0.04); --shadow-2: 0 8px 24px rgba(40, 36, 36, 0.10), 0 2px 6px rgba(40, 36, 36, 0.05); --shadow-3: 0 20px 48px rgba(40, 36, 36, 0.14), 0 6px 12px rgba(40, 36, 36, 0.08); /* ── RADII / SPACING / TYPOGRAPHY (перенесено з Inforeisen 1:1) ────────── */ --radius-sm: 8px; --radius-lg: 8px; --radius-pill: 100px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 40px; --font-mono: 'JetBrains Mono', monospace; --font-body: 'Outfit', sans-serif; /* ─────────────────────────────────────────────────────────────────────── */ /* COMPONENT GEOMETRY (override Inforeisen main.css defaults) */ /* Джерело: `кнопки. OponyToMy 2.html` */ /* ─────────────────────────────────────────────────────────────────────── */ /* Page-level Primary CTA (Pokaż opony, login submit, orders empty CTA) */ /* 2026-08-19: height 52→56 — DS §7 знову перескочив на 56. Впливає на всі OTM primary CTA через token (cart/checkout/orders/profile forms). */ --btn-cta-height: 56px; --btn-cta-radius: 30px; --btn-cta-padding: 18px 24px; --btn-cta-font-size: 18px; /* Smaller Primary (Zapisz, Dodaj do koszyka в картці) */ /* 2026-08-10: radius 30→999 (pill) per design system §9.1 — узгоджено з --btn-cta-radius pill і з --qty-stepper-radius OP (теж 999). Попереднє значення 30px (2026-08-05) було експериментом «той самий радіус, що й у головних», скасовано на користь спекованого pill. */ --btn-md-height: 52px; --btn-md-radius: 999px; --btn-md-padding: 0 20px; --btn-md-font-size: 15px; /* Compact Primary (tablet/desktop 112×36 add-btn) — height locked by row layout; adopt brand-language: pill + bold + compact typography. NOT in designer spec (mobile-390 only); extrapolated. 2026-08-10: radius 30→999 (pill) per design system §9.1. */ --btn-sm-height: 36px; --btn-sm-radius: 999px; --btn-sm-font-size: 15px; --btn-sm-font-weight: 700; --btn-font-weight: 700; /* Chip / EU-badge */ --chip-radius: 8px; --chip-font-size: 14px; /* Qty stepper — design system §7 + §9.3 (2026-08-10 pill-outline редизайн). Height 44px (2026-08-10) — раніше було 52px. Radius 999px pill — узгоджено з CTA-кнопкою поруч (--btn-md-radius OP теж 999px, повернуто до spec 2026-08-10 в цьому ж коміті). */ --qty-stepper-height: 44px; --qty-stepper-radius: 999px; --qty-stepper-width: 104px; /* mobile target */ --qty-stepper-width-tablet: 120px; --qty-stepper-width-desktop:132px; --qty-btn-width: 28px; --qty-btn-font-size: 20px; /* символ − / + */ --qty-value-font-size: 18px; --qty-value-weight: 700; /* accent-tinted surfaces — cardinal замість teal. --shadow-hover-cta прибрано 2026-08-10 per design system §9.1 (hover ефект-тіні на Primary CTA скасовано — hover тепер тільки background swap на --accent-hover). */ --bg-accent-tint-soft: rgba(180, 21, 34, 0.06); --bg-accent-tint-medium: rgba(180, 21, 34, 0.12); /* Note: --color-old-blue навмисно НЕ перевизначаємо — під oponytomy показуємо той самий Inforeisen'івський блакитний, що й на siteId=1 (див. utils/variables.css). Якщо колись треба буде змінити — bridge тут. */ }