/* MyChooz — ТОКЕНЫ. Единственный дом объявлений --mca-*. * * 🕳 13.09.2026: жил внутри style.css, а тот висит только на wp_enqueue_scripts — * то есть на фронте. В iframe-канвасе редактора (WP 6.3+ это отдельный документ) * НИ ОДНОГО объявления --mca-* не было, и 648 из 654 обращений var(--mca-…) по всем * блокам резолвились в ничто. В редакторе так выглядели все 26 блоков; заметили, * когда у спойлеров сняли hex-фолбэки по храповику verify-aesthetic.sh. * * Теперь файл отдаётся ДВУМ потребителям — один источник, два адреса: * фронт — wp_enqueue_style('mychooz-aesthetic-tokens'), main от него зависит; * канвас — add_editor_style('assets/css/tokens.css') в functions.php. * * Сюда кладём ТОЛЬКО объявления переменных. Правила вёрстки — в style.css. * Сторож: .claude/scripts/lint-editor-tokens.sh (блокер в pre-deploy-lint). */ /* ========================================================================== CSS VARIABLES (from theme.json) ========================================================================== */ :root { /* Colors */ --mca-bg: var(--wp--preset--color--background, #f7f8fa); --mca-surface: var(--wp--preset--color--content, #ffffff); --mca-text: var(--wp--preset--color--text, #1a1a1a); --mca-muted: var(--wp--preset--color--muted, #6b7280); --mca-primary: var(--wp--preset--color--primary, #e71d1d); --mca-primary-hover: var(--wp--preset--color--primary-hover, #c91818); --mca-border: var(--wp--preset--color--border, #e5e7eb); --mca-link: #1a0dab; --mca-star: #f59e0b; --mca-star-empty: #d1d5db; --mca-success: #10b981; --mca-warning: #f59e0b; --mca-error: #ef4444; --mca-info: #2563eb; /* Производные и постоянные — синк из мастера CRM/infrastructure/design/tokens.css (05.09.2026). border-light/pale считаются от базовых; ink/on-ink/photo-bg одинаковы в светлой и тёмной. */ --mca-border-light: color-mix(in srgb, var(--mca-border) 70%, var(--mca-surface)); --mca-pale: color-mix(in srgb, var(--mca-muted) 55%, var(--mca-surface)); --mca-primary-text: var(--mca-primary); --mca-success-text: #0a7a55; /* зелёный ТЕКСТ: на белом 5.9:1 (--mca-success для мелкого текста даёт 2.5) */ --mca-warning-text: #9a6a00; /* янтарный ТЕКСТ: на белом 5.4:1 */ --mca-ink: #1a1a1a; --mca-on-ink: #ffffff; --mca-photo-bg: #ffffff; /* Сцена под товаром — синк из мастера. Ступени света от центра плитки к краю. */ --mca-stage-core: 5%; --mca-stage-mid: 2%; --mca-stage-edge: 0%; --mca-skeleton-bg: color-mix(in srgb, var(--mca-text) 8%, var(--mca-surface)); /* заглушка загрузки: видна в обеих схемах */ /* Провенанс печатей фактов — синк из мастера: зелёный = наш замер, чёрный = официалка */ --mca-verified-mychooz: var(--mca-success); --mca-verified-official: var(--mca-text); /* Typography — из мастера CRM/infrastructure/design/tokens.css (SSOT). База body = ровно то, чем набран текст обзора: 16px / 1.7 Inter. */ /* Семейство: тот же стек, что в style.css:70. Нужен токеном, потому что канвас редактора берёт его из editor.css — там иначе дефолт -apple-system и метрика строки расходится с фронтом на 2px. */ --mca-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mca-font-base: 16px; --mca-font-sm: 14px; --mca-line-base: 1.7; /* Radius */ --mca-radius: var(--wp--custom--radius--large, 12px); --mca-radius-sm: var(--wp--custom--radius--small, 6px); --mca-radius-md: var(--wp--custom--radius--medium, 8px); /* Spacing — шкала из мастера CRM/infrastructure/design/tokens.css (SSOT), кратно 8. Не через --wp--preset--spacing--*: прод отдаёт там дефолтную шкалу WP (--20 = 0.44rem вместо наших 16px), то есть чужие числа под нашими именами. */ --mca-space-4: 4px; --mca-space-8: 8px; --mca-space-12: 12px; --mca-space-16: 16px; --mca-space-24: 24px; --mca-space-32: 32px; --mca-space-48: 48px; /* Layout */ --mca-content-width: 720px; /* РАМА САЙТА [закон 19.07.2026]: единая max-width широких поверхностей — контент хедера, хаб-шапка, острова главной, футер. Композиция обзора: 720 + 2×(40 gap + 200 sidebar) = 1200. Широкий блок = токен, не хардкод. */ --mca-wide-width: 1200px; --mca-gap-header: var(--wp--custom--gap--header-desktop, 32px); /* Island padding — единый токен для archive/author/search/404 (single/home/page имеют свою специфику и не используют) */ --mca-island-padding: 32px; --mca-island-padding-mobile: 24px 16px; /* Island gap — вертикальное расстояние между островами (родитель раскладывает их через flex column gap) */ --mca-island-gap: 24px; --mca-island-gap-mobile: 16px; /* WP admin-bar height token [26.07]: 0 у гостя. Ниже .admin-bar переопределяет (32 десктоп / 46 мобайл) — fixed-контролы сверху сами учитывают логин. */ /* Тач-мишень: 44px — минимум из UX-FUNDAMENTALS. В тесной мобильной шапке 40px (утв. прототип 14.07: иначе не влезает на 360). Один токен — одна правка на все кнопки. */ --mca-tap: 44px; /* Сегментированный переключатель (языки, тема). Одна форма — один набор чисел. Токены задают МИНИМУМ ширины: у языков сегмент дорастает до 84px текстом кода, у темы внутри иконка 18px, поэтому минимум и есть итоговая ширина: 84px делает иконочную капсулу той же ширины, что буквенная, — два переключателя подряд читаются как один элемент, а не как две разные детали. */ --mca-switch-h: 36px; --mca-switch-pad: 4px; --mca-switch-radius: 10px; --mca-switch-seg-radius: 8px; --mca-switch-seg: 52px; --mca-switch-seg-icon: 84px; --mca-switch-max: 260px; /* потолок капсулы: дальше растягивать некрасиво */ --mca-adminbar-h: 0px; /* Ездящая полоска-индикатор табов (.mca-tab-ink) — синк с мастером CRM/infrastructure/design/tokens.css. Быстро, но с движением: направление видно, ждать не приходится. */ --mca-tab-ink-height: 2px; --mca-tab-ink-speed: 0.12s cubic-bezier(0.2, 0, 0, 1); /* Знаки. Стрелка перехода — одна на весь сайт: `content: var(--mca-arrow)`. */ --mca-arrow: '\2192'; /* → переход по ссылке */ --mca-arrow-out: '\2197'; /* ↗ уход на внешний адрес */ /* Animation */ --mca-transition-fast: 0.15s ease; --mca-transition-normal: 0.25s ease; --mca-transition-slow: 0.35s ease; --mca-easing-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* Card shadows */ --mca-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); /* light cards (hp-post) */ --mca-card-shadow-dark: 0 4px 14px 2px rgba(0, 0, 0, 0.22); /* dark cards (hp-fc) */ --mca-card-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.22); /* Chart instrument — синк из мастера CRM/infrastructure/design/tokens.css (канон 19.07.2026) */ --mca-chart-line: var(--mca-text); --mca-chart-accent: var(--mca-primary); --mca-chart-fill: color-mix(in srgb, var(--mca-text) 5%, transparent); --mca-chart-grid: var(--mca-border-light); --mca-chart-label: var(--mca-muted); --mca-chart-stat: 20px; --mca-chart-tip-bg: var(--mca-text); } /* ═══ ТЁМНАЯ СХЕМА — зеркало мастера CRM/infrastructure/design/tokens.css (05.09.2026) ═══ html[data-theme="dark"] ставит mca-theme-init (functions.php, wp_head prio 0) из localStorage.mca_theme или системной схемы. Кнопка ☾/☀ в шапке (inc/menu.php) переключает. WP печатает пресеты на :root — здесь они перебиваются по специфичности, поэтому 78 прямых var(--wp--preset--color--*) в теме и 47 в блоках переключаются сами. */ :root { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; --mca-bg: #121316; /* фон страницы */ --mca-surface: #1c1e22; /* остров: светлее фона — высота цветом, не тенью */ --mca-text: #ececec; /* ~15:1 на bg */ --mca-muted: #9aa0a8; /* ~6.5:1 на surface */ --mca-border: #2c2f35; --mca-primary-hover: #ff3d3d; /* hover на тёмном светлее, не темнее */ --mca-link: #8ab4f8; /* синий Google на тёмном нечитаем */ --mca-star-empty: #3a3d44; --mca-success: #34d399; --mca-error: #f87171; --mca-info: #7fb0ff; --mca-stage-core: 46%; /* свет под товаром: чёрные модели на тёмной плитке пропадали */ --mca-stage-mid: 24%; --mca-stage-edge: 8%; /* подписи графика набраны 8px — на тёмном muted при таком кегле не читается */ --mca-chart-label: color-mix(in srgb, var(--mca-text) 70%, var(--mca-muted)); --mca-primary-text: #ff5252; /* красный ТЕКСТ на тёмном 5.23:1 (кнопка остаётся #e71d1d) */ --mca-success-text: #34d399; /* зелёный текст на тёмном 9.5:1 (светлый #0a7a55 давал 2.4) */ --mca-warning-text: #f59e0b; /* янтарный текст на тёмном 7.6:1 */ --mca-ink: #0b0b0d; /* тёмный остров темнее фона в обеих схемах */ /* WP-пресеты (theme.json palette) */ --wp--preset--color--background: #121316; --wp--preset--color--surface: #121316; --wp--preset--color--content: #1c1e22; --wp--preset--color--text: #ececec; --wp--preset--color--muted: #9aa0a8; --wp--preset--color--border: #2c2f35; --wp--preset--color--primary-hover: #ff3d3d; --wp--preset--color--success: #34d399; --wp--preset--color--error: #f87171; /* Тень на тёмном невидима — высота кольцом по границе */ --mca-card-shadow: 0 0 0 1px var(--mca-border); --mca-card-shadow-dark: 0 0 0 1px var(--mca-border); --mca-card-shadow-hover: 0 0 0 1px var(--mca-muted); } /* WP admin-bar → токен высоты [26.07]. Класс .admin-bar есть ТОЛЬКО у залогиненного, поэтому токен сам «знает про логин». Значения = реальная высота бара WP (32/46). */ .admin-bar { --mca-adminbar-h: 32px; } @media (max-width: 782px) { .admin-bar { --mca-adminbar-h: 46px; } }