/* @boog-ui-start */
:root {
  /* ── Neutral ramp (slate) ─────────────────────── */
  --slate-50:#f6f8fb; --slate-100:#eef1f6; --slate-200:#e4e8ef;
  --slate-300:#cbd3e0; --slate-400:#94a1b8; --slate-450:#8794ac; --slate-500:#64748b;
  --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a;
  /* ── Brand (indigo) ───────────────────────────── */
  --indigo-50:#eef0ff; --indigo-100:#e0e3ff; --indigo-400:#7b7ef0;
  --indigo-500:#5b5de9; --indigo-600:#4a4cd6; --indigo-700:#3d3fb8;
  /* ── Brand mark (логотип BOOG — .loader-boog/монограмма) ──
     Не семантическая роль: цвета самого знака, не перекрашиваются темой. */
  --brand-logo-blue:#6669ee; --brand-logo-red:#ef6d83; --brand-logo-ink:#5b5de9;
  /* ── Semantic color roles ─────────────────────── */
  --color-bg: var(--slate-50);
  --color-surface:#ffffff;
  --color-surface-2: var(--slate-100);
  --color-border: var(--slate-200);
  --color-text: var(--slate-900);
  --color-muted: var(--slate-500);
  /* Неактивная часть шкалы прогресса (ненаступивший шаг, соединитель). Отдельная роль,
     а не --color-border: волоску-границе хватает 1.15:1, а самостоятельной фигуре нужно ≥3:1.
     --slate-450 даёт 3.06:1 к белому — читается даже на точке 8px. */
  --color-track: var(--slate-450);
  /* Акцент - фирменный синий (решение PO 09.09.2026), не индиго. Тот же
     тон, что уже несут --color-success/-info с 08.09.2026 - до этой правки
     синим было все, кроме акцента, и это читалось как рассинхрон бренда. */
  --color-accent:#2563eb;
  --color-accent-hover:#1d4ed8;
  --color-accent-active:#1e40af;
  --color-accent-weak:#e8f0fe;
  --color-on-accent:#ffffff;
  --color-on-inverse:#ffffff;
  /* Успех - фирменный синий, не зеленый (решение PO 08.09.2026). Завершенное
     действие принадлежит продукту и красится его цветом; зеленый читался как
     чужая, светофорная система знаков. */
  --color-success:#2563eb; --color-success-weak:#e8f0fe;
  /* Присутствие человека - СВОЯ роль, не «успех» (решение PO 09.09.2026).
     Когда успех стал фирменным синим, точка «на связи» посинела заодно и
     перестала отличаться от акцента: в списке коллег синие точки читались
     как украшение строки, а не как «этому можно позвонить прямо сейчас».
     Присутствие - не результат действия, а состояние живого человека, и
     цвет ему нужен собственный. Зеленый тут не светофорный знак качества,
     а давняя договоренность про «человек на месте». */
  --color-online:#15803d;  --color-online-weak:#e7f6ec;
  --color-warning:#d97706; --color-warning-weak:#fdf1e3;
  --color-danger:#dc2626;  --color-danger-weak:#fdecec;
  --color-info:#2563eb;    --color-info-weak:#e8f0fe;
  --color-purple:#7c3aed;  --color-purple-weak:#f1ebfe;
  /* ── "Усиленные" тона для текста метки (.chip) на светлой заливке ──
     Тот же оттенок, что и у основного тона, но темнее: измерением в браузере
     (канвас, реальный отрисованный пиксель, не разбор строки цвета) базовые
     --color-success/-warning/-danger/-accent на своих -weak фонах дают контраст
     текста 2.71-4.43 при норме 4.5 для текста 12pt. Эти токены используются
     только там, где текст стоит на -weak фоне (метка); заливка кнопок, точки
     статусов и прочие места с базовым тоном не трогаем - там другая контрастная
     пара (белый текст на насыщенном фоне), там норма уже выполняется. */
  --color-success-strong:#1a4fbf;
  --color-warning-strong:#a75c05;
  --color-danger-strong:#d52222;
  --color-accent-strong:#1a4fbf;
  --color-purple-strong:#7c3aed;
  /* ── Кластеры компетенций (9 тонов) ────────────
     Компетенция всюду красится цветом своего кластера. Задаются здесь, чтобы
     работать в любой теме; .theme-pastel переопределяет 6 из них своими якорями.
     --cluster-N — насыщенный тон: ТОЛЬКО иконка/точка/текст. Заливка плашки —
     --cluster-N-weak, контур --cluster-N-weak-line: насыщенный тон совпадает с
     языком действий (кнопка/фокус), и данные сливаются с органами управления.
     Отдельное семейство, а не статусные роли: иначе компетенция читается как
     «успех»/«ошибка».
     Имена кластеров (ADR-042) — справочно; источник правды связи «кластер → цвет»
     сервис компетенций. 1–4 когнитивные, 5–9 человеческие.
     @cluster 1 Исследование и понимание
     @cluster 2 Проектирование решения
     @cluster 3 Критическое суждение
     @cluster 4 Организация работы
     @cluster 5 Сотрудничество
     @cluster 6 Влияние
     @cluster 7 Лидерство
     @cluster 8 Саморегуляция
     @cluster 9 Саморазвитие и рефлексия */
  --cluster-1: oklch(0.55 0.15 235); --cluster-2: oklch(0.56 0.16 305);
  --cluster-3: oklch(0.56 0.15 340); --cluster-4: oklch(0.56 0.15 150);
  --cluster-5: oklch(0.55 0.14 195); --cluster-6: oklch(0.55 0.15 270);
  --cluster-7: oklch(0.56 0.15 13);  --cluster-8: oklch(0.64 0.14 105);
  --cluster-9: oklch(0.60 0.15 70);
  /* --cluster-N-strong — тон ТЕКСТА на своей заливке -weak. Отдельный тон, а не
     базовый: базовый светлый законно (на нем стоят точка и значок, у них норма
     контраста другая), но текстом на пастельной заливке он давал 2.71-4.02 при
     норме 4.5 (замерено на препроде 09.09.2026: «Системное мышление» на карточке
     шаблона у Организатора - 3.73). Тот же прием, что у --color-*-strong.
     Светлота подобрана поштучно, насыщенность держится максимально возможная в
     охвате sRGB: у 1, 5, 8, 9 она вынужденно ниже базовой - на этой светлоте
     тон в охват не влезает, а зажатый браузером цвет до экрана не доезжает.
     Значения проверены: каждый дает 4.50-4.68 на своей заливке.
     Проверка: python3 design/tools/palette_check.py */
  --cluster-1-strong: oklch(0.51 0.109 235); --cluster-2-strong: oklch(0.53 0.16 305);
  --cluster-3-strong: oklch(0.53 0.15 340);  --cluster-4-strong: oklch(0.5 0.138 150);
  --cluster-5-strong: oklch(0.51 0.087 195); --cluster-6-strong: oklch(0.52 0.15 270);
  --cluster-7-strong: oklch(0.52 0.15 13);   --cluster-8-strong: oklch(0.51 0.109 105);
  --cluster-9-strong: oklch(0.52 0.113 70);
  --cluster-1-weak: oklch(0.93 0.05 235); --cluster-2-weak: oklch(0.93 0.05 305);
  --cluster-3-weak: oklch(0.93 0.05 340); --cluster-4-weak: oklch(0.93 0.05 150);
  --cluster-5-weak: oklch(0.93 0.05 195); --cluster-6-weak: oklch(0.93 0.05 270);
  --cluster-7-weak: oklch(0.93 0.05 13);  --cluster-8-weak: oklch(0.93 0.05 105);
  --cluster-9-weak: oklch(0.93 0.05 70);
  --cluster-1-weak-line: oklch(0.84 0.09 235); --cluster-2-weak-line: oklch(0.84 0.09 305);
  --cluster-3-weak-line: oklch(0.84 0.09 340); --cluster-4-weak-line: oklch(0.84 0.09 150);
  --cluster-5-weak-line: oklch(0.84 0.09 195); --cluster-6-weak-line: oklch(0.84 0.09 270);
  --cluster-7-weak-line: oklch(0.84 0.09 13);  --cluster-8-weak-line: oklch(0.84 0.09 105);
  --cluster-9-weak-line: oklch(0.84 0.09 70);
  /* ── Spacing (4px base) ───────────────────────── */
  --space-05:2px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px;
  /* ── Radius ───────────────────────────────────── */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-pill:999px;
  /* ── Elevation ────────────────────────────────── */
  --elev-1:0 1px 2px rgba(15,23,42,.06);
  --elev-2:0 4px 12px rgba(15,23,42,.08);
  --elev-3:0 12px 28px rgba(15,23,42,.12);
  --elev-4:0 24px 48px rgba(15,23,42,.16);
  /* ── Sizes (control-internal) ─────────────────── */
  --size-thumb:16px; --border-thin:1.5px; --border-thick:2px; --size-icon:18px;
  --size-badge-sm:26px; --size-badge-round:30px;
  /* Минимальный размер цели касания (44px) - общепринятая норма (Apple HIG,
     Material Design) для элементов, по которым попадают пальцем не глядя. */
  --size-touch:44px;
  /* Боковая навигация приложения. 256px = --space-16 * 4 — единственная ширина,
     точно ложащаяся на шкалу отступов. До канона расходились: Слайдер 240px,
     админка биллинга 256px (Tailwind w-64). Документные страницы (оферта и пр.)
     живут отдельной величиной — там навигация по длинному тексту, не приложение. */
  --size-sidenav: calc(var(--space-16) * 4);
  /* Рабочая область приложения — ширина содержимого правого фрейма, рядом с
     боковой навигацией. 1152px = --space-16 * 18: единственная величина в этом
     диапазоне, ложащаяся на шкалу отступов. До канона каждый экран выбирал
     своё — портальные страницы 940px, афиша 1100px, кабинет Организатора
     1160px, Мастерская 1400px, — и одинаковые по смыслу кабинеты выглядели
     разной ширины. Влезает таблица кабинета, не расплываясь на широком экране. */
  --size-content: calc(var(--space-16) * 18);
  --size-icon-wm:150px; --size-qr-box:78px; --size-icon-qr:50px;
  /* ── Poster (постер-афиша мероприятия) ────────── */
  --poster-cover-min-h:140px;
  --poster-cover-test: linear-gradient(135deg, oklch(0.56 0.16 305) 0%, oklch(0.46 0.15 300) 100%);
  --poster-cover-learn: linear-gradient(135deg, oklch(0.55 0.15 235) 0%, oklch(0.44 0.14 232) 100%);
  --poster-scrim-chip: oklch(1 0 0 / .9);
  --poster-scrim-stage: oklch(0 0 0 / .28);
  --poster-sub-color: oklch(1 0 0 / .92);
  --poster-title-shadow: 0 1px 8px oklch(0 0 0 / .25);
  --poster-sub-shadow: 0 1px 6px oklch(0 0 0 / .25);
  --poster-wm-offset-x: -14px; --poster-wm-offset-y: -28px;
  /* ── Typography ───────────────────────────────── */
  --font-display: 'Akrobat', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: 'Roboto', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-xs:12px; --text-sm:13px; --text-md:14px; --text-lg:16px; --text-xl:20px; --text-2xl:28px;
  --leading-tight:1.2; --leading-normal:1.5;
  /* ── State layers & focus ─────────────────────── */
  --state-hover: rgba(15,23,42,.06);
  --state-active: rgba(15,23,42,.12);
  --focus-ring: 0 0 0 3px rgba(37,99,235,.35);
  /* ── Motion ───────────────────────────────────── */
  --motion-fast:120ms; --motion-base:200ms; --ease-standard: cubic-bezier(.2,0,0,1);
  /* Стекло у нас прозрачное: своей заливки в покое нет, кнопку держат кромка
     и тень (решение PO 07.09.2026). Заливка появляется только под пальцем -
     нажатие должно быть видно, пока палец закрывает саму кнопку. */
  --glass-fill: transparent;
  --glass-fill-hover: rgba(255,255,255,.10);
  --glass-fill-press: rgba(255,255,255,.26);
  --glass-fill-off: rgba(255,255,255,.85);
  --glass-line: rgba(255,255,255,.28);
  --glass-line-strong: rgba(255,255,255,.35);
  --glass-blur: 18px;
  --glass-saturate: 120%;
  --glass-danger: rgba(220,38,38,.55);
  --glass-danger-hover: rgba(220,38,38,.75);
  --glass-fallback: rgba(0,0,0,.55);
}
/* @boog-ui-end */

/* ══════════════ Проектный слой Слайдера (канон не трогает) ══════════════
   Всё ниже — вне зоны канона: доменные токены продукта и директивы, которых
   в общем ките нет и быть не должно (ADR-048 §2.1). */
:root {
  /* Поверхности Слайдера (продуктовые слои сверх примитивов) — портал читает этот
     перечень, чтобы учитывать их токены в датчике «сирот». Канон директивы не имеет. */
  /* @surfaces cabinet-card,cabinet-list,season-hub,canvas-kit,chrome,create-board,editor-legacy-bridge,evaluation,feature-promo,new-slide,settings,share,slides */
  /* ── Плавающие поверхности редактора (диалоги/панели) ── */
  --size-dialog-md:448px;      /* компактный диалог-форма (напр. Сессия оценки) */
  --size-card-md:224px;        /* карточка над объектом холста */
  --size-panel-md:320px;       /* боковая панель итогов/списка */
  --size-editor-topbar:56px;   /* высота верхней панели редактора (для оффсетов) */
  /* ── Бренд-логотип BOOG — размеры для инлайн-монограммы переключателя приложений.
     Цвета (--brand-logo-blue/red/ink) уже канонизированы в ките, выше маркера. ── */
  --brand-logo-size:34px; --brand-logo-pad:6px; --brand-logo-font:10px;
  --brand-logo-ring:1.5px; --brand-logo-blur:1.1px;
  /* ── Стекло поверх видео ──────────────────────────────────────────
     Кнопки на видеокартинке не имеют своего фона: они показывают размытый
     кадр под собой. Значения собраны здесь, чтобы стекло везде выглядело
     одинаково. */
  /* Стекло у нас прозрачное: своей заливки в покое нет, кнопку держат кромка
     и тень (решение PO 07.09.2026). Заливка появляется только под пальцем -
     нажатие должно быть видно, пока палец закрывает саму кнопку. */
  --glass-fill: transparent;
  --glass-fill-hover: rgba(255,255,255,.10);
  --glass-fill-press: rgba(255,255,255,.26);
  --glass-fill-off: rgba(255,255,255,.85);
  --glass-line: rgba(255,255,255,.28);
  --glass-line-strong: rgba(255,255,255,.35);
  --glass-blur: 18px;
  --glass-saturate: 120%;
  --glass-danger: rgba(220,38,38,.55);
  --glass-danger-hover: rgba(220,38,38,.75);
  --glass-fallback: rgba(0,0,0,.55);
  --color-on-glass: #fff;
}