/* TOPGYM ONE — дизайн-токены (нормативно, docs/DESIGN.md §2). Светлая + тёмная тема через [data-theme]. Бренд-акцент — одна переменная --accent (сменить всё одним местом, D-01/D-03). */ :root { /* акцент бренда */ --accent: #6e4df6; --accent-hover: #5a3de0; --accent-active: #4c33c4; --accent-soft: #eee9fe; --accent-contrast: #ffffff; --accent-gradient: linear-gradient(135deg, #8e7bff 0%, #6e4df6 100%); /* ⚠️⚠️ БРЕНДОВАЯ ЛАВАНДА — СНЯТА С ФИГМЫ И С ЛЕНДИНГОВ (`P-192`, 08.09.2026), И ЭТО НЕ ВТОРОЙ АКЦЕНТ. Разбор — `DESIGN §38.2`. В брендовом файле фиолетовых стиля два: `Accent purple` #cabaf7 (под тёмный фон) и `Accent light theme` #b28ef8 (под светлый). У лендингов ровно эти же два числа. У продукта акцент третий — #6e4df6, и он ближе к лендинговому `--accent-deep` #7a4fe8, подписанному там «под белый текст, проходит AA». ⚠️ ЭТО НЕ ОШИБКА НИ С ОДНОЙ СТОРОНЫ, И ИМЕННО ПОЭТОМУ ЗДЕСЬ ТРИ ЗНАЧЕНИЯ, А НЕ ОДНО. #cabaf7 на белом как заливка кнопки нечитаем: белый текст на нём даёт контраст ниже AA. На чёрном фоне лендинга он же — единственный правильный. Свести их в одно число значило бы сломать одну из двух сторон, и выбирать это не сессии. ⚠️ ПОЧЕМУ ВСЁ-ТАКИ ЗАВЕДЕНЫ, А НЕ ОСТАВЛЕНЫ В ЧУЖОМ РЕПОЗИТОРИИ. До этой правки сессия, делавшая витрину, не имела фирменной лаванды ВООБЩЕ — и брала соседний оттенок на глаз. Ровно то, из-за чего написан `P-192`. */ --brand-accent-on-dark: #cabaf7; --brand-accent-on-light: #b28ef8; /* ⚠️⚠️ ФИОЛЕТОВЫЙ ПРОДУКТА ПОД ИМЕНЕМ, КОТОРОЕ КАБИНЕТ НЕ ПЕРЕКРАШИВАЕТ (`P-263`, 22.09.2026). Влад: «в чате своих сообщений чёрный фон выглядит слишком жёстко. Нужно сделать такой же фиолетовый, как в инбоксе у менеджеров, когда они пишут». В инбоксе своё сообщение менеджера — `--accent-soft`, а кнопки — `--accent`. Но в кабинете обе роли перекрашены палитрой «контур» в чёрное и серое (`DESIGN §2.7`), и взять их там нельзя: кабинет получил бы свой же серый. Поэтому те же числа заведены ОТДЕЛЬНЫМИ именами, которые кабинет не трогает. ⚠️ Они обязаны совпадать с `--accent` и `--accent-soft` консоли в обеих темах — это держит сторож `FR-CAB-CHAT-OWN-01`: разъедутся — сборка красная, а не «похожий оттенок на глаз». */ --brand-violet: #6e4df6; --brand-violet-soft: #eee9fe; --brand-violet-contrast: #ffffff; /* Фирменное свечение бренда: стиль `Purple shadow` из Фигмы — #cabaf7 при 60%, размытие 23,3, без смещения. Округлено до целого пикселя: треть пикселя размытия решением не является. */ --brand-glow: 0 0 23px rgba(202, 186, 247, 0.6); /* светлая тема (база продукта) */ --bg: #fafafb; --surface: #ffffff; /** * ⚠️ РОЛЬ «ПОЛОТНО ВХОДА» (`P-64`, правка Влада 23.08.2026: «Фон только черный или белый, в * зависимости от темы»). Отдельно от `--bg` намеренно: рабочий фон кабинета чуть тёплее белого * и чуть светлее чёрного, и менять его ради одного экрана значит тронуть все тридцать три. * Здесь нужен именно чистый цвет — так просил Влад, и так устроены витрины. */ --bg-auth: #ffffff; --surface-2: #f4f4f6; --border: #ececef; --text: #16161a; --text-muted: #6b6b76; --text-subtle: #9a9aa5; /* РОЛЬ «заголовок секции» (DESIGN §16, правка Влада 30.07.2026). Заголовки блоков набирались цветом подписи (--text-subtle) — светло-серым, из-за чего карточка читалась сплошной лентой: непонятно, где кончается один блок и начинается другой. Заголовок — это структура, а не подпись, поэтому у него свой токен, и он совпадает с основным текстом. Менять цвет заголовков теперь можно ЗДЕСЬ, а не в сорока местах. */ --text-heading: var(--text); /* семантика статусов */ --success: #16a34a; --success-soft: #e7f6ec; --warning: #d97706; --warning-soft: #fef3e2; --danger: #dc2626; --danger-soft: #fdecec; --info: #2563eb; --info-soft: #e8f0fe; /* палитра меток (DESIGN §21) — 21 метка: solid + soft bg, акцент на пастель/розовые. Выбор цвета ТОЛЬКО отсюда. */ --label-gray: #6b6b76; --label-gray-soft: #e9e9ec; --label-slate: #55607a; --label-slate-soft: #e7eaf0; --label-red: #dc2626; --label-red-soft: #fdecec; --label-peach: #e67848; --label-peach-soft: #fdeee6; --label-orange: #ea580c; --label-orange-soft: #fcede3; --label-amber: #d97706; --label-amber-soft: #fef3e2; --label-yellow: #b7930b; --label-yellow-soft: #fbf3d8; --label-lime: #5e8a0e; --label-lime-soft: #eef6dd; --label-green: #16a34a; --label-green-soft: #e7f6ec; --label-mint: #14b88a; --label-mint-soft: #e3f7ee; --label-teal: #0f9e77; --label-teal-soft: #e1f5ee; --label-cyan: #0e7c93; --label-cyan-soft: #e1f1f6; --label-sky: #0ea5e9; --label-sky-soft: #e6f3fc; --label-blue: #2563eb; --label-blue-soft: #e8f0fe; --label-indigo: #4f46e5; --label-indigo-soft: #ecebfb; --label-violet: #6e4df6; --label-violet-soft: #eee9fe; --label-mauve: #8b5fbf; --label-mauve-soft: #f1eaf5; --label-fuchsia: #c026d3; --label-fuchsia-soft: #f9e8fb; --label-pink: #db2777; --label-pink-soft: #fbeaf0; --label-blush: #d6608f; --label-blush-soft: #fdeef3; --label-rose: #e11d63; --label-rose-soft: #fce7ef; /* ЦВЕТ ИСТОЧНИКА ОБРАЩЕНИЯ (`DESIGN §21.1`, правка Влада 31.08.2026, `P-124`). Дословно: «инст своим цветом, можно градиентом, как сейчас инст по цвету отображается, wa своим, тг свои. с сайта фиолетовым. для других источник сам подбери». ⚠️ ЗАЧЕМ ОТДЕЛЬНЫЕ ТОКЕНЫ, А НЕ ССЫЛКИ НА ПАЛИТРУ МЕТОК. Источник — это не «метка вообще»: у WhatsApp, Telegram и Instagram есть узнаваемый фирменный цвет, и человек читает колонку канбана взглядом, не читая подписей. Смена палитры меток не должна перекрасить Telegram в розовый, а смена бренд-акцента — сделать сайт и Instagram одинаковыми (ровно это и было: заголовок карточки набирался `--accent`, и «Обращение из Instagram» и «Обращение из WhatsApp» выглядели одним фиолетовым). ⚠️ ЦВЕТ НЕ ЕДИНСТВЕННЫЙ НОСИТЕЛЬ СМЫСЛА. Название источника рядом остаётся всегда (`DESIGN §33.4`); эти токены только ускоряют чтение, а не заменяют его. Градиент Instagram — их собственный перелив; на тёмной теме он ведёт себя иначе, чем плоский цвет, поэтому мягкий фон под него задан отдельно ниже. */ --src-whatsapp: #25d366; --src-whatsapp-soft: #e3f9ec; --src-telegram: #229ed9; --src-telegram-soft: #e4f2fb; --src-instagram: #c13584; --src-instagram-soft: #fae8f2; --src-instagram-gradient: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%); --src-site: #6e4df6; --src-site-soft: #eee9fe; /* Остальные источники — подобраны так, чтобы отличаться и друг от друга, и от четырёх выше. */ --src-phone: #0f9e77; --src-phone-soft: #e1f5ee; --src-walkin: #b7930b; --src-walkin-soft: #fbf3d8; --src-referral: #e67848; --src-referral-soft: #fdeee6; --src-cabinet: #55607a; --src-cabinet-soft: #e7eaf0; --src-app: #0e7c93; --src-app-soft: #e1f1f6; --src-other: #6b6b76; --src-other-soft: #e9e9ec; /* ПЕРЕЛИВ ШАРА AI-АССИСТЕНТА (правка Влада 08.08.2026 с референсами Apple Intelligence/Siri: «искусственный интеллект хочется как-то подобным родом подсветить»). Заведён кабинетом, перенесён сюда 09.08: ассистент появится и в консоли, а второй набор цветов означал бы два разных «интеллекта» в одном продукте. Три остановки, а не один акцент: шар узнаётся именно переливом, одноцветный круг читается обычной кнопкой. Первая и третья — наш фиолетовый и синий --info из палитры; вторая — розовая, единственный цвет, которого в палитре нет, и он здесь обязателен: без тёплой ноты перелив выглядит браком печати, а не свечением. ⚠️ Это отступление от DESIGN §21, оно осознанное и названо вслух. */ /* * ⚠️⚠️ ЗДЕСЬ СТОЯЛО var(--accent), И К 20.09.2026 ЭТО ПЕРЕСТАЛО БЫТЬ ФИОЛЕТОВЫМ (P-257). * * Строка писалась 08.08.2026, когда акцент во ВСЕХ темах был #6e4df6. Палитра «контур» * (выбор Влада 06.09.2026) сделала акцент ЧЁРНЫМ в светлой теме и БЕЛЫМ в тёмной — и перелив * шара ассистента тихо потерял первую из трёх остановок. В тёмной теме кабинета шар с тех пор * переливался из белого в розовый и синий, в светлой — из чёрного. * * ⚠️ Дефект молчаливый по устройству: ни один гейт не спросит, остался ли цвет цветом. * Найдено при правке самого шара, а не проверкой. * * Теперь цвет назван числом, как соседние две остановки. В консоли значение не меняется * (там акцент и есть #6e4df6), в кабинете — возвращается замысел. */ --ai-orb-1: #6e4df6; --ai-orb-2: #ff8ad4; --ai-orb-3: var(--info); /* Блик — белый в обеих темах: это отражение света на глянце, а не цвет темы. */ --ai-orb-hi: #ffffff; /* * ЗАТЕМНЕНИЕ ПОД БЕЛЫМ ТЕКСТОМ ПОВЕРХ СНИМКА (P-257, 20.09.2026). * * ⚠️ ГОТОВЫМИ ГРАДИЕНТАМИ, А НЕ ТРОЙКОЙ КАНАЛОВ. Собирать плёнку в компоненте из * `rgb(var(--scrim) / 0.82)` тоже можно, но тогда решение «насколько темнить» живёт в разметке, * а в дизайн-коде остаётся один оттенок — то есть половина решения. Тот же приём, что у * `--accent-gradient`: градиент это решение целиком. * * ⚠️ ОДИНАКОВЫ В ОБЕИХ ТЕМАХ. Это не поверхность экрана, а тень НА ФОТОГРАФИИ: снимок зала не * светлеет от того, что человек включил светлую тему, а белый заголовок обязан читаться поверх * любого кадра, который клуб поставит в настройках. * * Оттенок не чёрный, а чуть синеватый: чистый чёрный поверх тёплого кадра выглядит грязью. */ /* Ведущая карточка: текст лежит слева, поэтому плёнка идёт наискось и гаснет вправо. */ --scrim-hero: linear-gradient(105deg, rgb(8 6 18 / 0.86) 0%, rgb(8 6 18 / 0.66) 45%, rgb(8 6 18 / 0.28) 100%); /* Плитка со снимком: подпись прижата к низу, поэтому плёнка идёт снизу вверх. */ --scrim-tile: linear-gradient(180deg, rgb(8 6 18 / 0.05) 35%, rgb(8 6 18 / 0.82) 100%); /* ⚠️ МЯГКОЕ ЗАТЕМНЕНИЕ ПОД ПЛАВАЮЩЕЙ ПАНЕЛЬЮ (`P-263`, пункт 17 Влада 22.09.2026: «нужно чуть-чуть затемнять бэкграунд, потому что белый фон сливается с другими белыми фонами»). Не плёнка окна-модалки (там 55%), а ровно столько, чтобы белая панель читалась отдельным слоем над белой страницей: страница под ней остаётся читаемой, она просто уходит на шаг назад. */ --scrim-soft: rgb(8 6 18 / 0.18); /* ⚠️ ТЁМНАЯ ВИТРИНА — ФОН КАРТОЧКИ, КОТОРУЮ ЧЕЛОВЕК ОТПРАВЛЯЕТ НАРУЖУ (P-159, 04.09.2026). Карточка «поделиться тренировкой» рисуется тёмной В ОБЕИХ ТЕМАХ: она уезжает в чужую ленту, где нашей темы нет вовсе, и светлый вариант там теряется на белом фоне мессенджера. Поэтому это токены, а не переменные темы, — и поэтому же они не берутся из `--bg`. До этой правки цвет стоял в компоненте шестью хардкодами (`#0b0718`, `#17093a`, `#fff`), что запрещено (`CLAUDE §16`), и сменить его можно было только правкой кода. */ --showcase-ink: #0b0718; --showcase-ink-2: #17093a; --showcase-on-ink: #ffffff; /* ⚠️ КАРТОЧКА АБОНЕМЕНТА — ПЛАСТИК, ОДИН НА ВЕСЬ ПРОДУКТ (`P-253`, `DESIGN §40`). Тёмная в ОБЕИХ темах: это предмет, а не поверхность экрана. Значения — те же, что Влад собирал на стойке 07.09.2026 (`--counter-*` кабинета), переехали сюда без изменения: иначе стойка поменяла бы вид молча. Форма — `membership-pass.css`, отрисовка — `MembershipPass`. */ --pass-ink: #17171a; --pass-ink-2: #212126; --pass-edge: #2e2e34; --pass-on-ink: #ffffff; --pass-muted: #9a9aa5; --pass-gold-hi: #f6e3ae; --pass-gold-lo: #b8862a; --pass-silver-1: #f2f3f5; --pass-silver-2: #d8dade; --pass-silver-3: #eff0f2; --pass-silver-4: #c9ccd1; --pass-on-silver: #14141a; /* ТИПОГРАФИКА — ФИРМЕННАЯ, НА ВЕСЬ ПРОДУКТ (решение Влада 09.08.2026). Закрывает `D-02`; начертания объявлены в `fonts.css`, файлы — в `packages/ui/fonts`. ПОЧЕМУ ОДНА ГАРНИТУРА, А НЕ «консоль своя, витрина своя». Кабинет набирался Gotham Pro с 06.08, консоль — Inter, и это ровно то, против чего заведены токены: разные шрифты расходятся молча, а увидеть разницу можно, только положив экраны рядом. Влад: «две гарнитуры в одном продукте это то, против чего заведены токены». ⚠️ ПОДКЛЮЧАТЬ `fonts.css` ОБЯЗАНО КАЖДОЕ ПРИЛОЖЕНИЕ. Токен называет гарнитуру, но не объявляет её. Забыли импорт — браузер молча берёт следующую в списке (`Inter`, дальше системную), всё соберётся и ничего не упадёт. Отсюда запасные варианты не убраны: они страховка на этот случай, а не «второй шрифт продукта». ⚠️ ВТОРЫМ В ЦЕПОЧКЕ СТОИТ РЕЗЕРВ С ПОДОГНАННЫМИ МЕТРИКАМИ (P-60, 22.08.2026), и это не «ещё один запасной вариант». Пока фирменный файл едет по сети, текст рисуется резервным — и если резерв занимает другое место, весь экран дёргается в момент подстановки (замер: ширина строки расходилась на 9,7–13,5 %, высота строки на 23 %, у Bebas ширина на 62,8 %). `Gotham Pro Fallback` и `Bebas Neue Fallback` объявлены в `fonts.css` так, чтобы занимать РОВНО столько же места: расхождение после правки 0,00 %. `Inter` и `system-ui` остаются последними — на случай, когда `fonts.css` не подключён вовсе. */ --font-ui: 'Gotham Pro', 'Gotham Pro Fallback', 'Inter', system-ui, sans-serif; --font-display: 'Bebas Neue', 'Bebas Neue Fallback', 'Gotham Pro', sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; /* ⚠️⚠️ ДВА ШАГА НИЖЕ ШТАТНОЙ ШКАЛЫ (`P-192`, 08.09.2026). Взяты, а не придуманы: 125 мест в продукте уже ставят ровно 11px, ещё 51 — ровно 10px, и все они написаны руками через произвольное значение (`text-[11px]`). ⚠️ ПОЧЕМУ ЭТО ВООБЩЕ СЛУЧИЛОСЬ — РАЗБОР ВАЖНЕЕ САМИХ ЧИСЕЛ. Радиусы в пресете заданы ЗАКРЫТОЙ шкалой (не `extend`), поэтому произвольных радиусов в проекте единицы. Цвета закрыты практикой: произвольных значений цвета ноль. А размеры шрифта заданы через `extend`, то есть шкала открыта — и рядом с ней штатно работает `text-[11px]`. ШКАЛА, КОТОРУЮ МОЖНО ОБОЙТИ, ОБХОДИТСЯ. Отсюда и токены, и сторож `FR-DESIGN-VALUE-01`. ⚠️ 0.68rem — ЭТО НЕ 11px, А 10,88px. В коде живут обе записи (15 мест против 125), и это не одно решение в двух единицах, а два разных решения. Разница в одну восьмую пикселя глазом не видна, но она есть, и молча свести их значило бы поменять вид живого экрана. Вынесено Владу вопросом. */ --text-mini: 11px; --text-micro: 10px; /* заголовки групп в под-навигации разделов (DESIGN §25.6). Заголовок обязан читаться СИЛЬНЕЕ подпунктов, иначе меню сливается в сплошную ленту: отсюда вес 700 и воздух перед группой. Значения берутся ТОЛЬКО отсюда — подбор размера/веса в компоненте это ошибка ревью (§16). */ --subnav-group-size: 0.6875rem; /* 11px — капс, но плотнее и жирнее пунктов */ --subnav-group-weight: 700; --subnav-group-tracking: 0.08em; --subnav-group-gap: 1.25rem; /* отступ сверху: отделяет группу от предыдущей */ /* слои (DESIGN §30.3). Модалка — 50, модалка поверх drawer'а — 60. Список выбора обязан быть ВЫШЕ обоих: он открывается ИЗ них и портируется в body. Число живёт здесь, а не в разметке (`z-[70]` по месту запрещён — иначе слои снова разъедутся по файлам). */ --z-popover: 70; /* радиусы, тени */ /* Отметка выбора (флажок в множественном списке) — СВОЙ шаг шкалы, а не `--radius-sm`. Причина не косметическая: 8px на коробочке 16-20px это круг, а круглая отметка означает «выбери одно». Человек читает форму раньше подписи и не отмечает вторую строку. */ --radius-control: 4px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-full: 999px; /* ВИТРИНА — шаг за пределами рабочей шкалы (заведён кабинетом 06.08.2026, перенесён сюда 09.08). Шкала выше закрыта на 16px, и для консоли это верно: рабочий экран смотрят часами, крупное скругление там шумит. Но кабинет клиента и портал — витрина, её смотрят минуту, и в референсах Влада фото-карточки скруглены заметно сильнее; на 16px они читаются плитками консоли. Имя `showcase`, а НЕ `xl`: `rounded-xl` в проекте запрещён специально, чтобы он не сработал тихо, и воскрешать его нельзя (DESIGN §29.2). */ --radius-showcase: 24px; /* ⚠️⚠️ СООТНОШЕНИЕ АФИШИ — ОДНО НА ВСЮ СИСТЕМУ (решение Влада 26.08.2026, `DESIGN §37`). Дословно: «В афишах надо сделать изображение прямоугольным, конкретный формат выбрать, чтобы под этот формат можно было делать баннеры.» Это не стилевая мелочь, а ДОГОВОРЁННОСТЬ С ДИЗАЙНЕРОМ: под это число рисуются баннеры. Поэтому число живёт здесь, а не в разметке экрана: `aspect-[4/3]` по месту разъехался бы между каруселью, лентой и полным объявлением — и первый же разъезд снова начал бы резать баннер, нарисованный под норму. Афишу показывает и кабинет, и редактор консоли, значит токен общий, а не кабинетный. 4:3, а не 16:9 и не 1:1 — разбор в `DESIGN §37`. Коротко: боевая афиша прода (1912 × 1434 px) ровно 4:3, а постер с ценой на картинке не терпит обрезки. */ --poster-aspect: 4 / 3; --shadow-sm: 0 1px 2px rgba(16, 16, 26, 0.06); --shadow: 0 4px 16px rgba(16, 16, 26, 0.08); --shadow-lg: 0 12px 32px rgba(16, 16, 26, 0.12); /* движение (нормативно, docs/DESIGN.md §24.2; CLAUDE.md §16, §19) Длительности и easing берутся ТОЛЬКО отсюда. Числовой литерал в компоненте — ошибка ревью. */ --motion-instant: 100ms; /* смена состояния кнопки, чекбокс */ --motion-fast: 150ms; /* hover, focus, tooltip */ --motion-base: 200ms; /* раскрытие, таб, popover */ --motion-slow: 300ms; /* drawer, modal, крупная панель */ --motion-page: 400ms; /* переход экрана — только маркетинг и портал инвестора */ --motion-stagger: 40ms; /* задержка между элементами списка */ /* ОТКЛИК НА НАЖАТИЕ (`P-262`, п. 1.4, правка Влада 21.09.2026: «чтобы при нажатии на кнопки была анимация нажатия»). Кнопка под пальцем чуть уменьшается — на телефоне наведения нет вовсе, и без отклика не видно, попал ли палец. 3%: заметно на кнопке, не «прыгает» на широкой карточке. */ --press-scale: 0.97; --motion-pulse: 1400ms; /* дыхание индикатора живого состояния — ЦИКЛ, не переход (§2.1.1) */ /* ⚠️ ВТОРОЙ И ПОСЛЕДНИЙ ЦИКЛИЧЕСКИЙ ТОКЕН — блик продающей карточки витрины (`DESIGN §24.11`, решение Влада 26.08.2026: продающая карточка «с анимациями»). Почему так долго: блик обязан читаться как медленная подсветка, а не как мигание. Короткий цикл на витрине, открытой минуту, превращается в раздражитель, а `DESIGN §24` начинается со слов «не развлекает». ⚠️ Цикл гасится НЕ обнулением длительности, а `animation: none` в правиле — у бесконечной анимации нулевая длительность крутит композитор впустую (тот же разбор, что у `--motion-pulse`). */ --motion-sheen: 5200ms; --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* появление — база UI */ --motion-ease-in: cubic-bezier(0.64, 0, 0.78, 0); /* исчезновение */ --motion-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* перемещение */ } /* Доступность: при prefers-reduced-motion движение выключается на уровне токенов, поэтому пресеты и CSS-переходы становятся мгновенными без правок в компонентах (DESIGN §24.6). */ @media (prefers-reduced-motion: reduce) { :root { --motion-instant: 0ms; --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; --motion-page: 0ms; --motion-stagger: 0ms; --motion-pulse: 0ms; --press-scale: 1; } } [data-theme='dark'] { --bg: #0b0b0f; --surface: #16161c; --bg-auth: #000000; --surface-2: #1e1e26; --border: #2a2a33; --text: #f5f5f7; --text-muted: #a0a0ad; --text-subtle: #6b6b76; --text-heading: var(--text); --accent-soft: #241d47; --brand-violet-soft: #241d47; /* На чёрном фоне 18% не видно вовсе: панель отделяется от страницы глубже. */ --scrim-soft: rgb(0 0 0 / 0.45); --success-soft: #10241a; --warning-soft: #2a1f10; --danger-soft: #2a1414; --info-soft: #101a2a; /* палитра меток — тёмные мягкие фоны (solid остаётся, читается на тёмном) */ /* Источники: сам цвет остаётся (он фирменный и читается на тёмном), мягкий фон пересчитывается — иначе пастель светлой темы светилась бы на чёрном как заливка. `P-124`. */ --src-whatsapp-soft: color-mix(in srgb, var(--src-whatsapp) 22%, #16161c); --src-telegram-soft: color-mix(in srgb, var(--src-telegram) 22%, #16161c); --src-instagram-soft: color-mix(in srgb, var(--src-instagram) 22%, #16161c); --src-site-soft: color-mix(in srgb, var(--src-site) 22%, #16161c); --src-phone-soft: color-mix(in srgb, var(--src-phone) 22%, #16161c); --src-walkin-soft: color-mix(in srgb, var(--src-walkin) 22%, #16161c); --src-referral-soft: color-mix(in srgb, var(--src-referral) 22%, #16161c); --src-cabinet-soft: color-mix(in srgb, var(--src-cabinet) 22%, #16161c); --src-app-soft: color-mix(in srgb, var(--src-app) 22%, #16161c); --src-other-soft: color-mix(in srgb, var(--src-other) 22%, #16161c); --label-gray-soft: color-mix(in srgb, var(--label-gray) 22%, #16161c); --label-slate-soft: color-mix(in srgb, var(--label-slate) 22%, #16161c); --label-red-soft: color-mix(in srgb, var(--label-red) 22%, #16161c); --label-peach-soft: color-mix(in srgb, var(--label-peach) 22%, #16161c); --label-orange-soft: color-mix(in srgb, var(--label-orange) 22%, #16161c); --label-amber-soft: color-mix(in srgb, var(--label-amber) 22%, #16161c); --label-yellow-soft: color-mix(in srgb, var(--label-yellow) 22%, #16161c); --label-lime-soft: color-mix(in srgb, var(--label-lime) 22%, #16161c); --label-green-soft: color-mix(in srgb, var(--label-green) 22%, #16161c); --label-mint-soft: color-mix(in srgb, var(--label-mint) 22%, #16161c); --label-teal-soft: color-mix(in srgb, var(--label-teal) 22%, #16161c); --label-cyan-soft: color-mix(in srgb, var(--label-cyan) 22%, #16161c); --label-sky-soft: color-mix(in srgb, var(--label-sky) 22%, #16161c); --label-blue-soft: color-mix(in srgb, var(--label-blue) 22%, #16161c); --label-indigo-soft: color-mix(in srgb, var(--label-indigo) 22%, #16161c); --label-violet-soft: color-mix(in srgb, var(--label-violet) 22%, #16161c); --label-mauve-soft: color-mix(in srgb, var(--label-mauve) 22%, #16161c); --label-fuchsia-soft: color-mix(in srgb, var(--label-fuchsia) 22%, #16161c); --label-pink-soft: color-mix(in srgb, var(--label-pink) 22%, #16161c); --label-blush-soft: color-mix(in srgb, var(--label-blush) 22%, #16161c); --label-rose-soft: color-mix(in srgb, var(--label-rose) 22%, #16161c); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } /** * ПОЛЯ ВВОДА НА ПАЛЬЦЕ — 16px, ИНАЧЕ iOS ЗУМИТ СТРАНИЦУ. * * Safari на iPhone при фокусе в поле с размером шрифта меньше 16px увеличивает всю страницу и * НЕ возвращает масштаб обратно. Человек заполняет форму на съехавшем экране и дальше листает * вбок, чтобы попасть в кнопку. Наши поля набраны `text-sm` (14px) — то есть зумит их все. * * Правило стоит здесь, а не в компоненте `Input`: полей ввода в системе больше одного — * `