/* ============================================================================= Sonaura — Design System Foundations (tokens) Канонический единый слой токенов для прототипов Today-first / CBT4T. Источник: сведены и разрешены из :root и стилей представительных экранов: v2/today/index.html v2/sound-therapy/index.html v2/practice-audio-player/index.html v2/practice-step-close/index.html v2/onb-_template/index.html ПРИНЦИП: ни одного «магического числа» и хардкод-цвета/тени в продуктовых экранах — всё ссылается на токен отсюда. Тёмная тема плеера и семантические цвета — тоже токены. НЕ ВКЛЮЧЕНО (намеренно): палитра служебной панели ревью .specpanel (бежевая #FAF6EE / #9a7b29, вес 800 и т.п.) — это инструмент ревью, а НЕ продукт. Эти значения остаются локальными в каждом экране. ============================================================================= */ :root{ /* --------------------------------------------------------------------------- 0. PRIMITIVES — сырые значения-источники (by-value). Семантические токены ниже ссылаются на них через var(). Primitive заводим ТОЛЬКО там, где одно значение носит ≥2 семантических имени (иначе плодим новые дубли). Случайные совпадения значений разных ролей (например --muted2 ≡ --dark-muted, --line ≡ --dark-text) НЕ связываем — роли разные. --------------------------------------------------------------------------- */ --slate-900:#1E293B; /* источник: --ink (текст) и --navy (тёмная поверхность) */ --slate-600:#475569; /* источник: --check-fill (заливка галочки-маркера выбранного сегмента) */ --red-500:#EF4444; /* источник: --safety */ --red-100:#FEE2E2; /* источник: --safety-focus (фокус-кольцо выбранного «Да», Tier-1) */ /* --------------------------------------------------------------------------- 1. БРЕНД / ОСНОВНЫЕ ЦВЕТА (бирюза + slate) --teal / --cyan — primitive бренда (by-value-имя допустимо для бренд-цвета). --------------------------------------------------------------------------- */ --teal:#2BB4C6; /* основной бирюзовый (бренд-primitive) */ --cyan:#3ED1DB; /* светлый бирюзовый, конец градиента (бренд-primitive) */ --grad:linear-gradient(135deg,var(--teal),var(--cyan)); /* фирменный градиент — на бренд-токенах */ --teal-ink:#0E7C8B; /* тёмная бирюза для текста/иконок на светлом */ --teal-tint:#E8F8FA; /* бирюзовый тинт (плашки, фокус-кольцо) */ --sky-tint:#F0F9FF; /* небесный тинт (опоры/планы) */ --sky-chip:#E1F0FB; /* подложка иконки-чипа на sky-карточке (askref/.ref .ic) */ --sky-line:#DCEEFB; /* небесная линия-граница (askref в покое) */ --sky-line-strong:#BFE2F7; /* небесная граница на hover (askref:hover) */ --sky-ink:#3a7e88; /* иконка-глиф на sky-чипе (графика, контраст ≥3:1) */ --sky-text:#3a5a6a; /* вторичный текст на sky-карточке (контраст 6.9:1 на --sky-tint) */ --teal-chip:#D2F0F4; /* подложка иконки-чипа на teal-карточке (.syscard .ic) */ --sona-tint:#DBE9EB; /* подложка реплики Sona на чат-поверхности — серо-бирюза, отличён от --teal-tint реплик-вставок в лентах (C6g) */ --navy:var(--slate-900); /* тёмный slate (фон тёмных поверхностей) */ --ink:var(--slate-900); /* основной текст */ --muted:#64748B; /* приглушённый текст */ --muted2:#94A3B8; /* самый тихий текст / иконки-плейсхолдеры */ /* --------------------------------------------------------------------------- 2. ПОВЕРХНОСТИ И ЛИНИИ (светлая тема) --------------------------------------------------------------------------- */ --surface:#FFFFFF; /* карточки, листы */ --bg:#F8FAFC; /* фон экрана */ --bg2:#F1F5F9; /* вторичный фон (тихие плашки, иконки-слоты) */ --line:#E2E8F0; /* границы, разделители, неактивные риски */ --teal-line:#CFE9EF; /* бирюзовая линия-граница на тинте (граница пузыря, ободок выбора) */ --backdrop:#0F172A; /* подложка устройства / theme-color */ /* стекло — полупрозрачные blur-подложки хрома (цвет базы @94% + backdrop-filter) */ --glass-bg:color-mix(in srgb,var(--bg) 94%,transparent); /* стекло на фоне экрана (шапка ленты: chattop) */ --glass-surface:color-mix(in srgb,var(--surface) 94%,transparent); /* стекло белой поверхности (таб-бар .nav, композер, топбар кабинета) */ /* --------------------------------------------------------------------------- 3. СЕМАНТИКА (внесена из прозы — единый источник) --------------------------------------------------------------------------- */ --success:#22C55E; /* успех/подтверждение (не для геймификации) */ --safety:var(--red-500); /* безопасность / кризис / медскрининг — ТОЛЬКО Tier-1 */ --curator:#7C6CD6; /* живой куратор (Sona ≠ Куратор ≠ SOS) */ --curator-ink:#5A48C0; /* тёмный фиолетовый: текст/акцент активного состояния Куратора */ --curator-deep:#645AC4; /* hover/pressed Куратора (кнопки-действия в кабинете) */ --curator-tint:#F0EDFB; /* мягкая фиолетовая подложка Куратора (фон карточек/чипов) */ --curator-tint-deep:#E4DEF7; /* прижатое (:active) состояние tint-поверхности Куратора — плита-присутствие R30 */ --curator-line:#D9D0F4; /* фиолетовая граница-разделитель Куратора */ --curator-grad:linear-gradient(135deg,var(--curator),#9B8BEA); /* градиент исходящего сообщения куратора */ --safety-ink:#991B1B; /* тёмно-красный текст на safety-плашке/баннере (Tier 1) */ --safety-ink-strong:#B91C1C; /* более тёмный заголовочный safety-красный (Tier 1: заголовки плашки, выбранный «Да») */ --check-fill:var(--slate-600); /* заливка галочки-маркера выбранного сегмента «Нет/Да» (нейтральный slate, НЕ teal/НЕ красный) */ /* --------------------------------------------------------------------------- 4. ТЁМНАЯ ПОДПАЛИТРА ПЛЕЕРА (санкционированная тёмная тема) Раньше — хардкод по плееру/звуковой терапии. Сведено в токены. --------------------------------------------------------------------------- */ --player-bg:#243149; /* верх радиального фона плеера */ --player-surf:#1B2740; /* подложка тёмной поверхности */ --dark-text:#E2E8F0; /* основной текст на тёмном */ --dark-text2:#CBD5E1; /* вторичный текст на тёмном (подписи слоёв) */ --dark-muted:#94A3B8; /* приглушённый текст на тёмном */ --dark-accent:#7FD8E2; /* бирюзовый акцент-текст на тёмном (hint, активный чип) */ --dark-fill:#27A2B2; /* заливка слайдера на тёмном (без градиента) */ --dark-dot:#5CCBD7; /* точка-прогресс / конец кольца на тёмном */ /* служебные альфа-слои поверх тёмного (вынесены из хардкода) */ --dark-surface-1:rgba(255,255,255,.06); /* кнопки/чипы fill */ --dark-surface-2:rgba(255,255,255,.10); /* треки слайдеров/прогресса */ --dark-border:rgba(255,255,255,.10); /* границы на тёмном */ --dark-divider:rgba(255,255,255,.08); /* разделители на тёмном */ /* --------------------------------------------------------------------------- 5. ТИПОГРАФИКА --------------------------------------------------------------------------- */ --sans:'Plus Jakarta Sans',-apple-system,system-ui,sans-serif; /* размерная шкала (была «магическими числами» по экранам) */ --fs-display:30px; /* V3-якорь: главная мысль экрана крупно (≈1.9× body); верх шкалы, доминирует над --fs-h1 */ --fs-h1:27px; /* заголовок страницы (pagetitle) */ --fs-h2:23px; /* заголовок карточки */ --fs-h3:18px; /* подзаголовки / weekhead / jcard b — верх диапазона */ --fs-h3-sm:17px; /* нижняя граница h3 (плеер ttl, jcard) */ --fs-body:15.5px; /* основной текст / поля ввода */ --fs-body-sm:15px; /* плотный основной текст */ --fs-meta:14px; /* мета-строки, описания */ --fs-meta-sm:13px; /* вторичная мета */ --fs-label:12px; /* подписи */ --fs-label-sm:11.5px; /* uppercase-метки разделов */ --fs-micro:11px; /* самые мелкие подписи/недельная шкала */ /* --------------------------------------------------------------------------- 6. SPACING (база 8) --------------------------------------------------------------------------- */ --sp-xs:4px; --sp-sm:8px; --sp-md:16px; --sp-lg:24px; --sp-xl:32px; /* --------------------------------------------------------------------------- 7. РАДИУСЫ --------------------------------------------------------------------------- */ --r-chip:999px; /* чипы, pill, грабберы, треки */ --r-xs:6px; /* мини-чипы, теги, мелкие внутренние пилюли (низ шкалы) */ --r-sm:11px; /* мелкие иконки-слоты, компактные контролы */ --r-btn:14px; /* кнопки, поля ввода, qr-act */ --r-nested:16px; /* вложенные карточки/блоки-шаги */ --r-nested-lg:18px; /* вложенные блоки (pulse/relief) — верх диапазона */ --r-card:20px; /* карточки верхнего уровня */ --r-card-lg:22px; /* крупная карточка — верх диапазона */ --r-2xl:26px; /* крупные карточки / шапки листов */ --r-sheet:48px; /* нижние листы (sheet), рамка телефона-прототипа */ /* --------------------------------------------------------------------------- 8. ТЕНИ / ELEVATION (сведены из токенов sound-therapy + хардкода today) --------------------------------------------------------------------------- */ --sh-card:0 1px 2px rgba(30,41,59,.04); /* тихая карточка */ --sh-cta:0 8px 20px rgba(43,180,198,.22); /* главная CTA-кнопка */ --sh-player-play:0 12px 30px rgba(43,180,198,.36); /* тень кнопки play иммерсивного плеера */ --sh-elevated:0 6px 22px rgba(43,180,198,.12); /* приподнятая активная карточка */ --sona-glow:0 12px 40px rgba(43,180,198,.18); /* мягкое бирюзовое свечение */ --sh-disc:0 4px 14px rgba(30,41,59,.10); /* белый SOS-диск */ --sh-sheet:0 -16px 48px rgba(15,23,42,.18); /* выезжающий лист SOS */ --sh-device:0 50px 100px rgba(0,0,0,.55); /* рамка устройства (прототип) */ /* --------------------------------------------------------------------------- 9. ФОКУС (единое правило — было непоследовательно) Канон: 4px бирюзовое кольцо тинтом на светлом; на тёмном — кольцо по dark-dot. Старый вариант outline 2px var(--teal) — устаревший. --------------------------------------------------------------------------- */ --focus-ring:0 0 0 4px var(--teal-tint); /* фокус на светлом */ --halo-now:0 0 0 3px var(--teal-chip); /* ореол состояния «сейчас» (.rnode.now/.fnode.now). ОТДЕЛЬНЫЙ от --focus-ring намеренно: покой ≠ фокус. До 2026-07-14 «сейчас» красилось --focus-ring — и клавиатурный фокус на текущем узле был НЕВИДИМ: узел уже выглядел сфокусированным. Плотнее и уже кольца фокуса (3px --teal-chip vs 4px --teal-tint). */ --focus-ring-dark:0 0 0 4px rgba(92,203,215,.35); /* фокус на тёмном */ --focus-ring-neutral:0 0 0 4px rgba(148,163,184,.25);/* нейтральное фокус-кольцо (slate-400@.25) — сегмент Нет/Да, где teal не уместна */ --safety-focus:0 0 0 4px var(--red-100); /* фокус-кольцо выбранного «Да» в медскрининге (Tier-1, red-100) */ /* --------------------------------------------------------------------------- 10. MOTION (движение) --------------------------------------------------------------------------- */ --t-micro:120ms; /* микро-отклик (нажатие knob) */ --t-short:220ms; /* стандартный переход */ --t-medium:340ms; /* выезды/раскрытия */ --t-tick:1s; /* посекундный тик таймера (осознанное исключение) */ --ease-out:ease-out; /* единая кривая */ /* --------------------------------------------------------------------------- 11. ТОКЕНЫ РОЛЕЙ КАБИНЕТА / ОНБОРДИНГА Реально используются на десктоп-кабинете и в онбординге; раньше были хардкодом по экранам. ВАЖНЫЙ ИНВАРИАНТ: amber-предупреждение (--warn-*) НЕ путать с safety-красным (--safety) — это разные смыслы, разный цвет. --------------------------------------------------------------------------- */ --seg-done:#BEE7ED; /* пройденный сегмент индикатора онбординга (.onbdots .seg.done) — teal-tint глубже */ --warn-ink:#92660C; /* текст amber-предупреждения (мягкий, НЕ кризис) */ --warn-bg:#FEF6E7; /* фон amber-предупреждения */ --warn-border:#F3D89B; /* граница amber-предупреждения */ --safety-tint:#FEF2F2; /* фон safety-плашки/баннера Tier 1 (бледно-красный) */ --safety-line:#FECACA; /* граница safety-плашки/баннера Tier 1 */ /* --------------------------------------------------------------------------- N. ИКОНКИ Канон — ЭФФЕКТИВНЫЙ штрих на экране, а не authored-число в разметке: eff = stroke-width × (размер рендера / 24) Одна и та же цифра 1.75 даёт разный штрих на 24px и на 12px, поэтому канон закреплён за eff, а authored ВЫВОДИТСЯ из ДВУХ величин — размера рендера и единиц viewBox: eff = stroke-width × размер / единицы_viewBox Носитель объявляет обе, вес считается сам: .foo svg{ --icon-px:28; --icon-vb:34; width:calc(var(--icon-px)*1px); … stroke-width:calc(var(--icon-eff)*var(--icon-vb)/var(--icon-px)); } Так вес не может разойтись ни с размером, ни с сеткой — порознь их больше не задать. Именно это расхождение и дало 13 инлайн-весов + 10 в CSS. Забыть про сетку — реальная ошибка: мотивы .sico нарисованы на 34×34, и формула с зашитым делителем 24 давала им eff 1.24 вместо 1.75. Геометрия глифов: viewBox 24×24, живая область 20×20, поле 2 (модель Lucide). Мотивы шагов — второй легальный класс на 34×34 (ADR-4): живая область 28×28, поле 3, центр (17,17) — та же пропорция 83%, что у 24-сетки. --------------------------------------------------------------------------- */ --icon-vb:24; /* единицы viewBox глифа по умолчанию; носитель 34/36-сетки перебивает */ --icon-eff:1.5; /* канон-штрих в CSS-px (реш. DK 2026-07-14). История подбора: 1.75 (исходный канон C6c) → 2 (тяжеловато) → 1.9 (середина) → 1.5. Меняется ЗДЕСЬ и только здесь: вес выводится из этого числа для всех размеров и сеток разом. */ --icon-eff-xs:1.5; /* потолок для носителей ≤14px: на 12px глиф со внутренней деталью (треугольник-предупреждение с «!») при 1.75 и выше заплывает — знак сливается со стенками. Проверено отрисовкой. Сейчас СОВПАДАЕТ с базовым (1.5) — это совпадение, не связь: токен остаётся отдельным, потому что при подъёме базы он НЕ поднимается следом, иначе мелкие глифы забьются. */ }