/* ============================================================================ tokens.css — ЕДИНЫЙ источник дизайн-токенов платформы BunnySplit (Волна 1). Что это: :root, перенесённый ДОСЛОВНО из pop.css (те же имена --card/--ink/ --violet/--r/--pill — ноль churn на сотнях правил), ПЛЮС недостающие по канону §3 ux-pro шкалы: 9-ступенчатые цвет-рампы, spacing (4px), radius- и type-шкала. ── ПОДКЛЮЧЕНИЕ (важно для нулевого дрейфа) ───────────────────────────────── Линкуется в КАЖДОЙ Pop-странице НЕПОСРЕДСТВЕННО ПЕРЕД pop.css (её прежний cascade-слот), а НЕ «первым в ». Причина: на страницах, где также грузятся landing.css (тёмная тема) и community.css (свои legacy-vars), одноимённые переменные (--bg/--ink/--line/--radius) сегодня разрешаются ПОРЯДКОМ загрузки — pop.css выигрывает, т.к. идёт последним. tokens.css встаёт ровно на место pop.css → та же картинка. «Первым» бы отдало победу тёмному landing.css → дрейф. Editor (index.html) НЕ линкует этот файл (правило «редактор = 3 файла»); его styles.css:root — зеркало, охраняемое drift-guard из backend/tools/ds-audit.py. ── РАМПЫ добавлены с УНИКАЛЬНЫМИ именами (--gray-50..900, --violet-50..900, --sp-1..12, --rad-xs..2xl, --fs-xs..3xl), которых нет ни в pop.css, ни в community.css, ни в landing.css — поэтому они НИЧЕГО не переопределяют и НЕ меняют существующую картинку. Это словарь для БУДУЩИХ волн (замена ~100 hardcoded near-дублей). Брейкпоинты — константой в комментарии: CSS-var в @media не работает. BP: sm 600px · md 900px · lg 1200px · xl 1440px ============================================================================ */ /* ── Плоский цветной эмодзи-шрифт (self-hosted Twemoji, COLR) ───────────────── «Наш стиль» вместо глянцевых системных Apple-эмодзи. Применяется ТОЧЕЧНО к эмодзи-глифам (.rx-emo / .ek-cell / .ek-tab в pop.css), НЕ глобально на body. COLR/CPAL → цветной плоский глиф. font-display:swap — не блокирует текст; woff2 грузится лениво, только когда семейство реально используется. Лицензия Twemoji — CC-BY 4.0 (строка в about-licenses). */ @font-face { font-family: 'BS Emoji'; src: url('/assets/fonts/twemoji.woff2') format('woff2'); font-display: swap; font-weight: normal; font-style: normal; } :root { /* ───────────────────────────────────────────────────────────────────────── БАЗА — дословно из pop.css:root (НЕ менять значения без drift-guard-прогона) ───────────────────────────────────────────────────────────────────────── */ /* surfaces */ --bg:#FFFDF7; /* warm almost-white page */ --bg2:#F6F2EA; /* section / track */ --card:#FFFFFF; /* cards */ /* ink */ --ink:#141414; --ink2:#5B5B66; --line:rgba(20,20,20,.08); --line2:rgba(20,20,20,.14); /* pop colors */ --coral:#FF5E7E; --violet:#7C5CFF; --blue:#2E6BFF; --lime:#C6F24E; --sun:#FFC53D; /* gradients */ --grad-hero:linear-gradient(135deg,#FF5E7E 0%,#7C5CFF 100%); --grad-2:linear-gradient(120deg,#2E6BFF,#7C5CFF); /* status */ --ok:#1FBF75; --warn:#FF9F1C; --err:#FF4D5E; /* radii */ --r:22px; --r-lg:32px; --pill:999px; /* shadows */ --shadow:0 8px 30px rgba(20,20,20,.06); --shadow-lg:0 20px 50px -20px rgba(124,92,255,.35); /* modal/overlay scrim — ЕДИНЫЙ источник подложки модалок (было: литералы rgba по файлам, напр. pvz-picker). Additive, не трогает бренд-ядро. */ --overlay-scrim:rgba(20,20,20,.42); /* fonts */ --font-display:'Unbounded',system-ui,sans-serif; --font:'Inter',system-ui,-apple-system,sans-serif; /* community-алиасы, ПРОДВИНУТЫ в общий источник (были только в community.css:267-271). Дыра канона: страницы БЕЗ community.css (SSR /g, /prompts, лендинги) резолвили эти var() в пустоту → embed-карточки/бейджи теряли фирменный пурпур. Значения = как в community.css, но через рампы (single-source). Community-страницы не меняются (там community.css переопределяет тем же значением). */ --txt:var(--ink); /* #141414 */ --mut:var(--ink2); /* #5B5B66 */ --accent:var(--violet); /* #7C5CFF — главный бренд-акцент */ --accent-soft:rgba(124,92,255,.10); --line-neon:rgba(124,92,255,.42); /* ───────────────────────────────────────────────────────────────────────── ДОБАВЛЕНО (канон §3) — 9-ступенчатые рампы. Уникальные имена → additive, ничего не переопределяют. Anchor = бренд-значение из базы выше. ───────────────────────────────────────────────────────────────────────── */ /* gray — тёплый (anchor 900=--ink, 100≈--bg2, 700≈--ink2, 500≈#8A8A92) */ --gray-50:#FBFAF7; --gray-100:#F6F2EA; --gray-200:#E9E4D9; --gray-300:#D6D0C4; --gray-400:#A8A29A; --gray-500:#8A8A92; --gray-600:#6B6B73; --gray-700:#5B5B66; --gray-800:#33333A; --gray-900:#141414; /* violet — akцент (anchor 500=--violet #7C5CFF; 400=--accent-h #9277FF) */ --violet-50:#F2EFFF; --violet-100:#E4DEFF; --violet-200:#C9BEFF; --violet-300:#AB9BFF; --violet-400:#9277FF; --violet-500:#7C5CFF; --violet-600:#6B4AEE; --violet-700:#5A38D6; --violet-800:#4326B8; --violet-900:#2E1A80; /* coral — вторичный акцент (anchor 500=--coral #FF5E7E) */ --coral-50:#FFF0F3; --coral-100:#FFE0E7; --coral-200:#FFC2CE; --coral-300:#FF9DB0; --coral-400:#FF7A93; --coral-500:#FF5E7E; --coral-600:#F53E63; --coral-700:#D63A4A; --coral-800:#B22A3C; --coral-900:#7A1B28; /* amber — warning/sun (anchor 400=--sun #FFC53D, 500=--warn #FF9F1C) */ --amber-50:#FFF8E8; --amber-100:#FFEFC4; --amber-200:#FFE08A; --amber-300:#FFD05C; --amber-400:#FFC53D; --amber-500:#F59E0B; --amber-600:#E08600; --amber-700:#B36A00; --amber-800:#8A5200; --amber-900:#5C3600; /* emerald — success (anchor 500=--ok #1FBF75, 600=#10B981) */ --emerald-50:#E7F9F1; --emerald-100:#C6F1DF; --emerald-200:#8FE3C0; --emerald-300:#52D3A0; --emerald-400:#2BC98A; --emerald-500:#1FBF75; --emerald-600:#10B981; --emerald-700:#0E9466; --emerald-800:#0B6E4E; --emerald-900:#073F2D; /* rose — error/danger (anchor 500=--err #FF4D5E, 600=#F43F5E) */ --rose-50:#FFF0F1; --rose-100:#FFDDE0; --rose-200:#FFB8C0; --rose-300:#FF8C99; --rose-400:#FF6675; --rose-500:#FF4D5E; --rose-600:#F43F5E; --rose-700:#D63A4A; --rose-800:#A82838; --rose-900:#6E1922; /* ───────────────────────────────────────────────────────────────────────── ДОБАВЛЕНО — spacing 4px-сетка (§3). Уникальные имена --sp-*. ───────────────────────────────────────────────────────────────────────── */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:56px; --sp-11:64px; --sp-12:96px; /* ───────────────────────────────────────────────────────────────────────── ДОБАВЛЕНО — radius-шкала (параллельна --r/--r-lg/--pill, не переопределяет). ───────────────────────────────────────────────────────────────────────── */ --rad-xs:6px; --rad-sm:9px; --rad-md:12px; --rad-lg:16px; --rad-xl:22px; --rad-2xl:32px; --rad-pill:999px; /* ───────────────────────────────────────────────────────────────────────── ДОБАВЛЕНО — type-шкала (§3: 12/14/16/18/20/24/30/36). Уникальные --fs-*. ───────────────────────────────────────────────────────────────────────── */ --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-md:18px; --fs-lg:20px; --fs-xl:24px; --fs-2xl:30px; --fs-3xl:36px; --lh-tight:1.15; --lh-normal:1.5; --lh-relaxed:1.7; /* ───────────────────────────────────────────────────────────────────────── WIDTHS — канон единой ширины сервиса (frontend/brand/WIDTHS.md, 2026-07-29). --page-max — ЕДИНАЯ оболочка/хром ВСЕХ страниц (= маркетплейс .pp-mk-wrap). --read-max — читаемая колонка ТЕКСТА (лента/статья/пост, оптимум ~65-75 симв). --maxw — ЛЕГАСИ-алиас (был 1180 в landing.css): теперь = --page-max, чтобы все существующие var(--maxw)-usages (community/landing/blog/hub) стали 1360. Guard: `python3 backend/tools/ds-audit.py --widths` (fail-closed, ≥1000px мимо токена). ───────────────────────────────────────────────────────────────────────── */ --page-max:1360px; --read-max:840px; --maxw:var(--page-max); /* ───────────────────────────────────────────────────────────────────────── ДОБАВЛЕНО (WP-SP-02/03/04) — генеративные ОБЛОЖКИ «never-blank». Пары ТОЛЬКО существующих рамп выше (ноль новых hue). Стопы подобраны ≤~0.30 rel-luminance → белая моно-буква даёт AA ≥3:1 на любом стопе даже БЕЗ scrim; scrim+тень — запас. posterSurface(product) выбирает --cover-1..6 детерминированно по hash(id). ───────────────────────────────────────────────────────────────────────── */ --cover-1:linear-gradient(135deg,var(--violet-500),var(--coral-600)); --cover-2:linear-gradient(135deg,var(--blue),var(--violet-600)); --cover-3:linear-gradient(135deg,var(--coral-600),var(--amber-700)); --cover-4:linear-gradient(135deg,var(--emerald-700),var(--blue)); --cover-5:linear-gradient(135deg,var(--violet-700),var(--blue)); --cover-6:linear-gradient(135deg,var(--coral-600),var(--violet-600)); --cover-mono:#FFFFFF; /* моно-буква — белая (AA ≥3:1 на стопах выше) */ --cover-mono-scrim:rgba(20,20,20,.24); /* радиальный scrim под буквой → запас контраста */ /* постер model-viewer до загрузки меша — брендовый, НЕ серый флеш (WP-SP-04) */ --cover-poster-flash:var(--violet-50); /* контактная тень под силуэтом рендер-обложки (WP-SP-03); у full-bleed фото клипается overflow:hidden медиа-бокса → видна ТОЛЬКО у contain-силуэта */ --cover-contact-shadow:0 6px 12px rgba(20,20,20,.18); }