/* Лендинг: собирает Лендинг/Вёрстка/tools/make-tokens.py тем же кодом - руками не править.
   C 2.0 «Лаборатория» Обновленная: токены дизайн-системы C 2.0 (design/system-c2/DESIGN.md, раздел 3).
   Файл собирает parts/make-tokens.py из DESIGN.md - руками не править: правка токена - в DESIGN.md, затем
   python3 design/directions/c2/parts/make-tokens.py. Имена ролей - прежние имена c2, значения - системы.
   Темы (3.17): светлая - :root; тёмная - [data-theme="dark"] или тема системы без ручного выбора (выбор - parts/theme.js).
   Оболочка (полоса, боковая панель, таббар, тёмные вставки) - вне темы; рабочая зона внутри неё возвращает тему;
   поднятый слой (меню, нижний лист) в тёмной теме на ступень светлее листа. */
@import url('fonts/fonts.css');   /* шрифты локально (2026-11-02), не Google - fonts/fonts.css */

:root {
  /* 3.1. Бренд-примитивы */
  --brand-black: #0A0A0A;
  --brand-graphite: #1A1A1A;
  --brand-graphite-2: #242422;
  --brand-graphite-line: #2C2C2A;
  --brand-graphite-3: #333331;
  --brand-white: #FFFFFF;
  --brand-mist: #F2F3EF;
  --brand-mist-2: #E8E9E4;
  --brand-mist-line: #E3E4DF;
  --brand-grey-dark: #5E5E59;
  --brand-grey: #6E6E69;
  --brand-grey-light: #A6A6A1;
  --brand-lime: #CDFA2A;
  --brand-orange: #E84E0B;
  --brand-rust: #B23A05;

  /* 3.2. Поверхности */
  --shell: var(--brand-black);
  --shell-2: var(--brand-graphite);
  --shell-line: var(--brand-graphite-line);
  --bg: var(--brand-white);
  --surface: var(--brand-mist);
  --surface-2: var(--brand-mist-2);
  --line: var(--brand-mist-line);
  --control: var(--brand-white);
  --control-hover: var(--brand-mist-2);
  --inset: var(--brand-graphite);
  --accent-tint: rgba(205, 250, 42, .42);
  --scrim: rgba(10, 10, 10, .4);

  /* 3.3. Текст и on-цвета */
  --ink: var(--brand-black);
  --text-2: var(--brand-grey-dark);
  --text-3: var(--brand-grey);
  --on-dark: var(--brand-white);
  --on-dark-2: var(--brand-grey-light);
  --on-accent: var(--brand-black);
  --on-ink: var(--brand-white);
  --on-ink-2: var(--brand-grey-light);
  --ink-hover: var(--brand-graphite);
  --on-attn: var(--brand-black);
  --data-fill: var(--ink);

  /* 3.4. Акцент: лайм */
  --accent: var(--brand-lime);

  /* 3.5. Внимание: оранжевый */
  --attn: var(--brand-orange);
  --attn-text: var(--brand-rust);

  /* 3.6. Состояния (новое) */
  --state-ok: var(--ink);
  --state-warn: var(--attn);
  --state-error: var(--attn);
  --state-info: var(--text-2);

  /* 3.7. Фокус */
  --focus: var(--ink);
  --focus-on-dark: var(--accent);
  --focus-w: 2px;
  --focus-offset: 2px;
  --focus-room: calc(var(--focus-w) + var(--focus-offset));

  /* 3.8. Шрифты */
  --font-ui: "Manrope", system-ui, sans-serif;
  --font-display: "Unbounded", "Manrope", sans-serif;

  /* 3.9. Типографическая шкала */
  --t-label: 700 12px/1.3 var(--font-ui);
  --t-cal: 500 12px/1.2 var(--font-ui);
  --t-small: 500 13px/1.45 var(--font-ui);
  --t-small-desk: 500 14px/1.45 var(--font-ui);
  --t-body: 500 15px/1.5 var(--font-ui);
  --t-num: 700 16px/1.3 var(--font-ui);
  --t-num-desk: 700 15px/1.3 var(--font-ui);
  --t-h3: 700 17px/1.25 var(--font-ui);
  --t-h2: 600 22px/1.1 var(--font-display);
  --t-h1-m: 600 28px/1 var(--font-display);
  --t-h1: 600 34px/1 var(--font-display);
  --t-num-xl-m: 600 40px/0.95 var(--font-display);
  --t-num-xl: 600 56px/0.9 var(--font-display);
  --t-wordmark: 700 30px/1 var(--font-display);
  --t-badge: 700 12px/16px var(--font-ui);
  --t-hero: 600 56px/1 var(--font-display);
  --t-lead: 500 22px/1.4 var(--font-ui);
  --t-text-lg: 500 17px/1.5 var(--font-ui);
  --t-text-xl: 500 20px/1.5 var(--font-ui);
  --t-section: 600 48px/1.05 var(--font-display);
  --ls-label: .1em;
  --ls-h3: -0.01em;
  --ls-h2: -0.03em;
  --ls-h1: -0.04em;
  --ls-wordmark: -0.05em;

  /* 3.10. Отступы и размеры */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
  --row: 44px;
  --row-desk: 40px;
  --tap: 48px;
  --tap-min: 44px;
  --ctl-lg: 56px;
  --ctl-plan: 64px;
  --chip-desk: 36px;
  --chip-sm-desk: 32px;
  --sig-h: 28px;
  --sig-n: 16px;

  /* 3.11. Радиусы */
  --r-mark: 4px;
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-card: 24px;
  --r-pill: 999px;

  /* 3.12. Тени, слои, прозрачность */
  --shadow-float: 0 4px 15px rgba(0,0,0,.14);
  --opacity-disabled: .45;
  --opacity-stale: .55;
  --shine: rgba(255, 255, 255, .55);
  --z-raise: 1;
  --z-bar: 20;
  --z-menu: 30;
  --z-pop: 60;
  --z-scrim: 65;
  --z-overlay: 70;
  --z-toast: 80;

  /* 3.13. Каркас и брейкпоинты */
  --side-w: 248px;
  --rail-w: 88px;
  --wrap-max: 1200px;
  --wrap-narrow: 720px;
  --aside-w: 340px;
  --aside-w-wide: 400px;
  --gutter: 48px;
  --gutter-tab: 32px;
  --gutter-phone: 20px;
  --hour: 64px;
  --bp-phone: 600px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;

  /* 3.14. Движение и иконки */
  --dur: 200ms;
  --dur-slow: 280ms;
  --easing: ease;
  --easing-out: cubic-bezier(.2,.8,.2,1);
  --dur-spring: 360ms;
  --dur-shine: 3600ms;
  --easing-spring: cubic-bezier(.34, 1.3, .64, 1);
  --icon-xs: 14px;
  --icon-s: 16px;
  --icon-m: 20px;
  --icon-l: 24px;
  --icon-stroke: 2;

  /* 3.17. Темы: светлая и тёмная */
  --illus-cat-happy: normal;
  --illus-cat-grumpy: normal;
  --illus-cat-overload: normal;
  --illus-blend: normal;
}

/* ---------- Темы (DESIGN.md 3.17) ---------- */
:root, [data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }

/* Тёмная тема: рабочий лист и рабочая зона внутри оболочки */
[data-theme="dark"],
:where([data-theme="dark"]) :where(.side, .band, .tabbar, .assign-bar, .dark, .pult, .ctl, .st__band, .fin, .card--dark, .good, .wo-sum, .wo-src, .k5-tip, .ix a.is-dark, .fmt, .join__btn--on, .sync, .btn--shell, .tag--shell, .seg--dark, .lp-band) :where(.work, .st__frame) {
  --bg: var(--brand-graphite);
  --surface: var(--brand-graphite-2);
  --surface-2: var(--brand-graphite-line);
  --line: var(--brand-graphite-line);
  --control: var(--brand-graphite-line);
  --control-hover: var(--brand-graphite-3);
  --inset: var(--brand-black);
  --accent-tint: rgba(205, 250, 42, .12);
  --scrim: rgba(10, 10, 10, .6);
  --ink: var(--brand-mist);
  --text-2: var(--brand-grey-light);
  --text-3: var(--brand-grey-light);
  --on-ink: var(--brand-black);
  --on-ink-2: var(--brand-grey-dark);
  --ink-hover: var(--brand-mist-2);
  --data-fill: var(--brand-grey-light);
  --attn-text: var(--brand-orange);
  --state-ok: var(--ink);
  --state-info: var(--text-2);
  --focus: var(--ink);
  --shadow-float: 0 0 0 1px var(--brand-graphite-3), 0 4px 15px rgba(0,0,0,.5);
  --illus-cat-happy: url("design/system-c2/assets/v2/cat-happy-sticker.webp");
  --illus-cat-grumpy: url("design/system-c2/assets/v2/cat-grumpy-sticker.webp");
  --illus-cat-overload: url("design/system-c2/assets/v2/cat-overload-sticker.webp");
  --illus-blend: normal;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  :where(:root:not([data-theme="light"])) :where(.side, .band, .tabbar, .assign-bar, .dark, .pult, .ctl, .st__band, .fin, .card--dark, .good, .wo-sum, .wo-src, .k5-tip, .ix a.is-dark, .fmt, .join__btn--on, .sync, .btn--shell, .tag--shell, .seg--dark, .lp-band) :where(.work, .st__frame) {
    --bg: var(--brand-graphite);
    --surface: var(--brand-graphite-2);
    --surface-2: var(--brand-graphite-line);
    --line: var(--brand-graphite-line);
    --control: var(--brand-graphite-line);
    --control-hover: var(--brand-graphite-3);
    --inset: var(--brand-black);
    --accent-tint: rgba(205, 250, 42, .12);
    --scrim: rgba(10, 10, 10, .6);
    --ink: var(--brand-mist);
    --text-2: var(--brand-grey-light);
    --text-3: var(--brand-grey-light);
    --on-ink: var(--brand-black);
    --on-ink-2: var(--brand-grey-dark);
    --ink-hover: var(--brand-mist-2);
    --data-fill: var(--brand-grey-light);
    --attn-text: var(--brand-orange);
    --state-ok: var(--ink);
    --state-info: var(--text-2);
    --focus: var(--ink);
    --shadow-float: 0 0 0 1px var(--brand-graphite-3), 0 4px 15px rgba(0,0,0,.5);
    --illus-cat-happy: url("design/system-c2/assets/v2/cat-happy-sticker.webp");
    --illus-cat-grumpy: url("design/system-c2/assets/v2/cat-grumpy-sticker.webp");
    --illus-cat-overload: url("design/system-c2/assets/v2/cat-overload-sticker.webp");
    --illus-blend: normal;
  }
}

/* Тёмная тема, поднятый слой: меню, нижний лист - на ступень светлее листа */
:where([data-theme="dark"]) :where(.menu__pop, .sig-sheet, .sys-modal, .sys-eff-pop, .sys-cal) {
  --bg: var(--brand-graphite-2);
  --surface: var(--brand-graphite-line);
  --surface-2: var(--brand-graphite-3);
  --line: var(--brand-graphite-3);
  --control: var(--brand-graphite-line);
  --control-hover: var(--brand-graphite-3);
  --inset: var(--brand-black);
  --accent-tint: rgba(205, 250, 42, .12);
  --scrim: rgba(10, 10, 10, .6);
  --ink: var(--brand-mist);
  --text-2: var(--brand-grey-light);
  --text-3: var(--brand-grey-light);
  --on-ink: var(--brand-black);
  --on-ink-2: var(--brand-grey-dark);
  --ink-hover: var(--brand-mist-2);
  --data-fill: var(--brand-grey-light);
  --attn-text: var(--brand-orange);
  --state-ok: var(--ink);
  --state-info: var(--text-2);
  --focus: var(--ink);
  --shadow-float: 0 0 0 1px var(--brand-graphite-3), 0 4px 15px rgba(0,0,0,.5);
  --illus-cat-happy: url("design/system-c2/assets/v2/cat-happy-sticker.webp");
  --illus-cat-grumpy: url("design/system-c2/assets/v2/cat-grumpy-sticker.webp");
  --illus-cat-overload: url("design/system-c2/assets/v2/cat-overload-sticker.webp");
  --illus-blend: normal;
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) :where(.menu__pop, .sig-sheet, .sys-modal, .sys-eff-pop, .sys-cal) {
    --bg: var(--brand-graphite-2);
    --surface: var(--brand-graphite-line);
    --surface-2: var(--brand-graphite-3);
    --line: var(--brand-graphite-3);
    --control: var(--brand-graphite-line);
    --control-hover: var(--brand-graphite-3);
    --inset: var(--brand-black);
    --accent-tint: rgba(205, 250, 42, .12);
    --scrim: rgba(10, 10, 10, .6);
    --ink: var(--brand-mist);
    --text-2: var(--brand-grey-light);
    --text-3: var(--brand-grey-light);
    --on-ink: var(--brand-black);
    --on-ink-2: var(--brand-grey-dark);
    --ink-hover: var(--brand-mist-2);
    --data-fill: var(--brand-grey-light);
    --attn-text: var(--brand-orange);
    --state-ok: var(--ink);
    --state-info: var(--text-2);
    --focus: var(--ink);
    --shadow-float: 0 0 0 1px var(--brand-graphite-3), 0 4px 15px rgba(0,0,0,.5);
    --illus-cat-happy: url("design/system-c2/assets/v2/cat-happy-sticker.webp");
    --illus-cat-grumpy: url("design/system-c2/assets/v2/cat-grumpy-sticker.webp");
    --illus-cat-overload: url("design/system-c2/assets/v2/cat-overload-sticker.webp");
    --illus-blend: normal;
  }
}

/* Оболочка - вне темы: внутри неё роли светлые, как в c2 (кроме --inset и --focus: их решает зона вокруг) */
[data-theme="light"] {
  --bg: var(--brand-white);
  --surface: var(--brand-mist);
  --surface-2: var(--brand-mist-2);
  --line: var(--brand-mist-line);
  --control: var(--brand-white);
  --control-hover: var(--brand-mist-2);
  --inset: var(--brand-graphite);
  --accent-tint: rgba(205, 250, 42, .42);
  --scrim: rgba(10, 10, 10, .4);
  --ink: var(--brand-black);
  --text-2: var(--brand-grey-dark);
  --text-3: var(--brand-grey);
  --on-ink: var(--brand-white);
  --on-ink-2: var(--brand-grey-light);
  --ink-hover: var(--brand-graphite);
  --data-fill: var(--ink);
  --attn-text: var(--brand-rust);
  --state-ok: var(--ink);
  --state-info: var(--text-2);
  --focus: var(--ink);
  --shadow-float: 0 4px 15px rgba(0,0,0,.14);
  --illus-cat-happy: normal;
  --illus-cat-grumpy: normal;
  --illus-cat-overload: normal;
  --illus-blend: normal;
}
:where([data-theme="dark"]) :where(.side, .band, .tabbar, .assign-bar, .dark, .pult, .ctl, .st__band, .fin, .card--dark, .good, .wo-sum, .wo-src, .k5-tip, .ix a.is-dark, .fmt, .join__btn--on, .sync, .btn--shell, .tag--shell, .seg--dark, .lp-band) {
  --bg: var(--brand-white);
  --surface: var(--brand-mist);
  --surface-2: var(--brand-mist-2);
  --line: var(--brand-mist-line);
  --control: var(--brand-white);
  --control-hover: var(--brand-mist-2);
  --accent-tint: rgba(205, 250, 42, .42);
  --scrim: rgba(10, 10, 10, .4);
  --ink: var(--brand-black);
  --text-2: var(--brand-grey-dark);
  --text-3: var(--brand-grey);
  --on-ink: var(--brand-white);
  --on-ink-2: var(--brand-grey-light);
  --ink-hover: var(--brand-graphite);
  --data-fill: var(--ink);
  --attn-text: var(--brand-rust);
  --state-ok: var(--ink);
  --state-info: var(--text-2);
  --shadow-float: 0 4px 15px rgba(0,0,0,.14);
  --illus-cat-happy: normal;
  --illus-cat-grumpy: normal;
  --illus-cat-overload: normal;
  --illus-blend: normal;
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) :where(.side, .band, .tabbar, .assign-bar, .dark, .pult, .ctl, .st__band, .fin, .card--dark, .good, .wo-sum, .wo-src, .k5-tip, .ix a.is-dark, .fmt, .join__btn--on, .sync, .btn--shell, .tag--shell, .seg--dark, .lp-band) {
    --bg: var(--brand-white);
    --surface: var(--brand-mist);
    --surface-2: var(--brand-mist-2);
    --line: var(--brand-mist-line);
    --control: var(--brand-white);
    --control-hover: var(--brand-mist-2);
    --accent-tint: rgba(205, 250, 42, .42);
    --scrim: rgba(10, 10, 10, .4);
    --ink: var(--brand-black);
    --text-2: var(--brand-grey-dark);
    --text-3: var(--brand-grey);
    --on-ink: var(--brand-white);
    --on-ink-2: var(--brand-grey-light);
    --ink-hover: var(--brand-graphite);
    --data-fill: var(--ink);
    --attn-text: var(--brand-rust);
    --state-ok: var(--ink);
    --state-info: var(--text-2);
    --shadow-float: 0 4px 15px rgba(0,0,0,.14);
    --illus-cat-happy: normal;
    --illus-cat-grumpy: normal;
    --illus-cat-overload: normal;
    --illus-blend: normal;
  }
}

/* Кольцо фокуса: в оболочке - лайм (3.15, п. 40), в рабочей зоне и поднятом слое внутри неё - по своему листу */
@scope (.side, .band, .tabbar, .assign-bar, .dark, .pult, .ctl, .st__band, .fin, .card--dark, .good, .wo-sum, .wo-src, .k5-tip, .ix a.is-dark, .fmt, .join__btn--on, .sync, .btn--shell, .tag--shell, .seg--dark, .lp-band) to (.work, .st__frame, .menu__pop, .sig-sheet, .sys-modal, .sys-eff-pop, .sys-cal) {
  :focus-visible { outline-color: var(--focus-on-dark); }
}
.menu__pop :focus-visible,
.sig-sheet :focus-visible,
.sys-modal :focus-visible,
.sys-eff-pop :focus-visible,
.sys-cal :focus-visible { outline-color: var(--focus); }

/* «Проведение тренировки» и «Итог проведения» - вне темы, всегда светлые. Экраны решаются вместе с приложением клиента
   (решение пользователя), их страницы не меняются - скрипт темы туда не подключён, ручной выбор до них не дошёл бы. */
:root:has(> .page-k4, > .page-summary) { color-scheme: light; }
@scope (.page-k4, .page-summary) {
  :scope,
  :where(.menu__pop, .sig-sheet, .sys-modal, .sys-eff-pop, .sys-cal),
  :where(.side, .band, .tabbar, .assign-bar, .dark, .pult, .ctl, .st__band, .fin, .card--dark, .good, .wo-sum, .wo-src, .k5-tip, .ix a.is-dark, .fmt, .join__btn--on, .sync, .btn--shell, .tag--shell, .seg--dark, .lp-band) :where(.work, .st__frame) {
    --bg: var(--brand-white);
    --surface: var(--brand-mist);
    --surface-2: var(--brand-mist-2);
    --line: var(--brand-mist-line);
    --control: var(--brand-white);
    --control-hover: var(--brand-mist-2);
    --inset: var(--brand-graphite);
    --accent-tint: rgba(205, 250, 42, .42);
    --scrim: rgba(10, 10, 10, .4);
    --ink: var(--brand-black);
    --text-2: var(--brand-grey-dark);
    --text-3: var(--brand-grey);
    --on-ink: var(--brand-white);
    --on-ink-2: var(--brand-grey-light);
    --ink-hover: var(--brand-graphite);
    --data-fill: var(--ink);
    --attn-text: var(--brand-rust);
    --state-ok: var(--ink);
    --state-info: var(--text-2);
    --focus: var(--ink);
    --shadow-float: 0 4px 15px rgba(0,0,0,.14);
    --illus-cat-happy: normal;
    --illus-cat-grumpy: normal;
    --illus-cat-overload: normal;
    --illus-blend: normal;
  }
}