/* ============================================================================ TOKENS-AO — словарь дизайн-направления АртОбои (artoboi.kz), 20.07.2026 ============================================================================ Источник направления: research/2026-07-20 dizajn-ao/DIZAJN-NAPRAVLENIE-AO.md («светлая галерея, принт — герой»). Контракт тот же, что у v5 (СтальПро): направление = ОДИН файл tokens*.css; шаблоны серии НЕ содержат ни одного цветового литерала — только var(); все литералы живут здесь. Шрифты подключает САМ файл токенов. Ключевые решения, зашитые в значения: — Светлая галерейная тема: тёплый почти-белый фон #F7F5F1, глубокий тёплый графит #26231E (не чистый чёрный). Тёмное — ТОЛЬКО футер и точечные подложки. Тёмная тема для интерьерного B2C запрещена (анти-паттерн 20.07). — Акцент: глубокий ботанический зелёный #2E5E4A (ложится на цветы/природу = 50% продаж Kaspi). ⚠ РАЗВИЛКА владельца (направление §развилка 5): акцент меняется ТОЛЬКО в группе 4 этого файла — серия альтернатив (латунный и др.) = копия файла с другой группой 4. — Красный Kaspi #F14635 — ТОЛЬКО классы .kaspi-btn / .kaspi-badge (узнаваемость платёжного бренда; в UI-акценты не расползается — память 20.07 «Kaspi-дыра»). Белый на #F14635 = 3.71:1 → метка кнопки ВСЕГДА ≥19px/700 (AA large text ≥3.0); hover — --kaspi-deep (4.86:1, AA normal). — Типографика: Prata (антиква, «журнал об интерьере») + Golos Text (текст/UI/цены). Unbounded НЕ перенесён: капс-техно = «завод, не интерьер» (инверсия правила №43 СтальПро, направление §Типографика). Цены — цифры-герои в Golos 700 (табличная читаемость цифр). — Радиусы мягкие (14/10px, чипы-пилюли) — интерьерное B2C; канон 0–4px остаётся у СтальПро, сюда не переносится. — Motion: UI < 300ms, scale от 0.95+, БЕЗ ease-in; WOW (reveal/hover-zoom) — только hero и галереи, НЕ конфигуратор/формы/фильтры (направление §WOW). — Контраст: все канон-пары считает check-contrast-ao.py (глазами не принимается). --muted/--faint не осветлять (анти-паттерн «серые на глаз»). Группы: 1 поверхности · 2 текст · 3 линии · 4 АКЦЕНТ (своп-зона) · 5 Kaspi (карантин) · 6 тёмный футер · 7 тени/градиенты · 8 типошкала · 9 layout · 10 motion. ============================================================================ */ /* В проде (Astro) — self-host woff2; @import уйдёт при переносе. */ @import url('https://fonts.googleapis.com/css2?family=Prata&family=Golos+Text:wght@400;500;600;700&display=swap'); :root{ /* ---- 1. Поверхности (светлая галерея) ----------------------------------- */ --bg: #F7F5F1; /* тёплый почти-белый — фон страницы */ --paper: #FFFFFF; /* карточки товаров, поля форм, панель меню */ --panel: #F1EDE6; /* тёплая подложка секций-«пауз», плейсхолдеры фото */ --header-bg: rgba(247, 245, 241, .93); /* --bg на 93% + blur */ /* ---- 2. Текст (тёплый графит) ------------------------------------------- */ --ink: #26231E; /* заголовки, цены-герои */ --ink-700: #423D35; /* наборный текст */ --muted: #6B655C; /* вторичный (5.30:1 на --bg) */ --faint: #767066; /* подписи, крошки (4.51:1 на --bg — не осветлять) */ /* ---- 3. Линии ------------------------------------------------------------ */ --line: #E6E1D8; /* тонкие разделители */ --line-strong: #CFC9BD; /* рамки полей/карточек */ /* ---- 4. АКЦЕНТ — ботанический зелёный (СВОП-ЗОНА: менять только здесь) --- */ --accent: #2E5E4A; /* кнопки/ссылки/бейджи (белый на нём 7.46:1; */ /* сам как текст на --bg 6.85:1 — AA с запасом) */ --accent-deep: #234A3A; /* hover/active кнопок */ --accent-ink: #FFFFFF; /* текст на акцентной заливке */ --accent-soft: #EAF0EA; /* мягкая зелёная подложка (панели, спец-карточки) */ --accent-on-dark: #8FBFA5; /* акцент на тёмном футере (≥4.5:1) */ --focus-ring: rgba(46, 94, 74, .45); /* :focus-visible */ /* ---- 5. KASPI (карантин: ТОЛЬКО .kaspi-btn / .kaspi-badge) --------------- */ --kaspi: #F14635; /* фирменный красный Kaspi — метка ≥19px/700 (AA large) */ --kaspi-deep: #D6311F; /* hover/active (белый 4.86:1 — AA normal) */ --kaspi-ink: #FFFFFF; /* ---- 6. Тёмный футер (единственная тёмная зона страницы) ----------------- */ --dark: #26231E; --dark-panel: #312D26; /* панель/поле на тёмном */ --dark-line: #4A453C; --on-dark: #EDE9E2; /* наборный на тёмном (12.94:1) */ --on-dark-dim: #B5AEA2; /* вторичный (7.11:1) */ --on-dark-faint: #9A9285; /* подписи (5.09:1 — не осветлять) */ --on-dark-strong: #FFFFFF; /* ---- 7. Тени и градиенты (композитные — 0 литералов в шаблонах) ---------- */ --shadow-card: 0 1px 2px rgba(38, 35, 30, .06), 0 1px 0 rgba(255, 255, 255, .8) inset; --shadow-card-hover: 0 18px 34px -20px rgba(38, 35, 30, .35); --shadow-btn: 0 8px 18px -10px rgba(46, 94, 74, .55); --shadow-btn-hover: 0 12px 26px -12px rgba(46, 94, 74, .65); --shadow-kaspi: 0 8px 18px -10px rgba(214, 49, 31, .5); --shadow-header: 0 1px 0 var(--line); --shadow-plate: 0 24px 48px -28px rgba(38, 35, 30, .4); /* hero-панели */ --ph-grad: linear-gradient(150deg, var(--accent-soft), var(--panel) 58%, var(--bg)); /* плейсхолдер фото-слота */ --ph-grad-warm: linear-gradient(150deg, var(--panel), var(--bg) 55%, var(--accent-soft)); /* чередование соседних слотов */ --scrim: linear-gradient(180deg, rgba(38, 35, 30, 0) 35%, rgba(38, 35, 30, .68)); /* подпись поверх фото */ /* ---- 8. Типошкала (целые px через rem; наборный 16) ----------------------- */ --ff-display: 'Prata', 'Georgia', serif; /* заголовки — антиква */ --ff-text: 'Golos Text', 'Segoe UI', sans-serif; --fs-11: .6875rem; /* мета-метки */ --fs-12: .75rem; /* eyebrow, крошки, футер-низ */ --fs-13: .8125rem; /* подписи, consent, бейджи */ --fs-14: .875rem; /* примечания, chips */ --fs-15: .9375rem; /* вторичный наборный */ --fs-16: 1rem; /* базовый body */ --fs-17: 1.0625rem; /* лиды */ --fs-18: 1.125rem; /* подзаголовки карточек */ --fs-19: 1.1875rem; /* метка .kaspi-btn (AA large при 700) */ --fs-price: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); /* итог конфигуратора 24→36 */ --fs-num-lg: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); /* цифры-герои доверия 28→44 */ --fs-h1: clamp(1.625rem, 1.2rem + 1.7vw, 2.5rem); /* H1 26→40 (Prata, lh 1.25) */ --fs-h2: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); /* H2 22→30 */ --fs-h3: 1.1875rem; /* H3 19px */ --lh-body: 1.65; --lh-head: 1.25; /* антиква требует больше воздуха, чем Unbounded 1.16 */ /* ---- 9. Layout ------------------------------------------------------------ */ --radius: 14px; /* карточки, фото, панели (мягкое B2C, не канон 0–4) */ --radius-btn: 10px; --radius-chip: 999px; /* чипы-фильтры — пилюли */ --container: 1180px; --pad-inline: clamp(1.25rem, 4vw, 2.5rem); --section-pad: clamp(3.5rem, 7vw, 6rem); --header-h: 76px; --header-h-m: 64px; --tap: 48px; /* минимальная хит-зона (KZ-трафик мобильный) */ /* ---- 10. Motion (UI <300ms; scale от 0.95+; ease-in ЗАПРЕЩЁН) ------------- */ --ease: cubic-bezier(.16, .8, .34, 1); --dur-1: 180ms; /* hover UI, чипы, кнопки */ --dur-2: 220ms; /* тени/подъём карточек */ --dur-3: 260ms; /* кросс-фейд двойного превью, флаут меню */ --dur-reveal: 380ms; /* мягкий reveal WOW-зон (hero, плитки) */ --zoom-print: 1.04; /* hover-zoom принта (деликатный) */ }