/*
 * Sensever Design System — единственная библиотека стилей всех поддоменов
 * (sensever.com, chat, Flow, Accounts, виджет, комментарии, админка).
 *
 * Состав /ds/:
 *   tokens.css — все переменные: шрифты, размеры, цвета, фоны, границы, радиусы. Светлая и тёмная тема.
 *   fonts.css  — Roboto, свои файлы в /ds/fonts, без внешних CDN.
 *   base.css   — умолчания для html, body, заголовков, ссылок и полей ввода.
 *   prose.css  — типографика статей (.prose): редактор Studio, читалка, документы админки.
 * Приложения подключают эти файлы и не заводят собственных переменных, палитр и @font-face.
 *
 * Правила:
 *  1. Цвет, фон, граница, размер шрифта, толщина, межстрочный интервал, семейство и радиус
 *     задаются только через var(--…) из этого файла. Литерал допустим лишь для 0, none,
 *     transparent, currentColor, inherit и значений внутри этого файла.
 *  2. Размеры шрифта — только шкала --fs-12 … --fs-32; --fs-display — только заголовки лендинга.
 *     Межстрочный интервал — только --lh-tight (заголовки, однострочные элементы) и --lh-text (текст).
 *  3. Текст: --text-1 основной, --text-2 вторичный, --text-3 приглушённый, --text-inverse на акценте.
 *     Фоны: --bg-1 страница, --bg-2 боковые панели, --surface карточки и диалоги,
 *     --bg-3 поля и hover, --bg-4 выбранное и нажатое. Границы: --border-1, --border-2.
 *     Радиусы: --radius-s/m/l, --radius-full (круг, пилюля) и --radius-control — полукруг для
 *     элементов высотой 42px, который не растёт вместе с полем (поле ввода чата, скрепка).
 *     Тёмная полоса в обеих темах: --bg-inverse с текстом --text-on-inverse-1/-2.
 *     Фото и видео: --media-bg (подложка), --on-media (текст и иконки поверх), --media-scrim (затемнение) — одинаковы в обеих темах.
 *  4. Статусные цвета (--danger, --success, --warning, --info) — только для статусов,
 *     не для украшения. Зелёного цвета бренда в интерфейсе нет.
 *  5. Новое значение появляется только здесь, в обеих темах сразу, и называется по роли,
 *     а не по цвету. Локальные переменные допустимы для геометрии компонента (ширины, отступы).
 *  6. Именование — BEM: .block, .block__element, .block--modifier. Без id-селекторов
 *     (id — только крючки для JS) и без !important; !important есть только в base.css: [hidden] и 16px в полях на телефоне (иначе iOS увеличивает страницу);
 *     поле крупнее 16px (заголовок-редактор) задаёт свой размер через --control-font-size, меньше 16px оно не станет.
 *  7. Каждая страница оборачивается в .page-<имя> на корневом элементе раздела; все правила
 *     страницы начинаются с этой обёртки или с блока, который живёт только на ней.
 *     Общие компоненты (кнопки, поля, списки, диалоги) — отдельные блоки без обёртки.
 *  8. Один файл — одна страница или один компонент; файл регистрируется в ops/styles/ownership.json.
 *  9. Комментариев в CSS нет. Это интро — единственное; пояснения пишутся в описании коммита.
 * 10. Исключения, где литералы допустимы: палитра аватаров, темы обоев чата, KaTeX,
 *     цвета, пришедшие из данных пользователя. Проверка: node ops/styles/ds-check.mjs.
 */
:root {
    color-scheme: light;

    --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fs-12: 12px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-24: 24px;
    --fs-28: 28px;
    --fs-32: 32px;
    --fs-display: clamp(34px, 5.4vw, 56px);

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 600;

    --lh-tight: 1.25;
    --lh-text: 1.5;

    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 16px;
    --radius-full: 999px;
    --radius-control: 21px;

    --text-1: #111111;
    --text-2: #555555;
    --text-3: #999999;
    --text-inverse: #ffffff;

    --bg-1: #ffffff;
    --bg-2: #f9f9f9;
    --bg-3: #f5f5f5;
    --bg-4: #ececec;
    --surface: #ffffff;

    --border-1: #eeeeee;
    --border-2: #dddddd;

    --accent: #111111;
    --accent-hover: #333333;
    --link: #2563eb;
    --focus: #2563eb66;

    --danger: #e53e3e;
    --danger-soft: #fdecec;
    --success: #2f9e5c;
    --success-soft: #e8f5ec;
    --warning: #c77d00;
    --warning-soft: #fff5e0;
    --info: #2563eb;
    --info-soft: #eef4ff;

    --overlay: rgb(0 0 0 / 35%);
    --shadow-color: rgb(16 24 20 / 10%);
    --shadow: 0 8px 24px var(--shadow-color);
    --skeleton: #eeeeee;
    --on-media: #ffffff;
    --media-scrim: rgb(0 0 0 / 45%);
    --media-bg: #000000;
    --bg-inverse: #111111;
    --text-on-inverse-1: #ffffff;
    --text-on-inverse-2: #b4bfca;

    --presence-online: #35b66a;
    --presence-offline: #b5bcb8;
    --chat-bg: #fcfdfb;
    --bubble-in: #ffffff;
    --bubble-in-border: #e9ece6;
    --bubble-out: #edf2e8;
    --bubble-out-border: #e6ecdf;
    --bubble-meta: #8c958e;
    --quote-bg: #2563eb12;
    --quote-accent: #2563eb;
    --glass-background: linear-gradient(135deg, rgb(255 255 255 / 40%), rgb(255 255 255 / 10%));
    --glass-fallback-background: rgb(246 247 248 / 94%);
}

:root[data-scheme="dark"] {
    color-scheme: dark;

    --text-1: #e8edf2;
    --text-2: #b4bfca;
    --text-3: #7f8b97;
    --text-inverse: #0f1317;

    --bg-1: #0f1317;
    --bg-2: #13181d;
    --bg-3: #1f262e;
    --bg-4: #29313b;
    --surface: #171c22;

    --border-1: #252d36;
    --border-2: #35404b;

    --accent: #e8edf2;
    --accent-hover: #ffffff;
    --link: #6cb4ff;
    --focus: #6cb4ff80;

    --danger: #ff6b6b;
    --danger-soft: #3b2023;
    --success: #43cf80;
    --success-soft: #16301f;
    --warning: #f0b440;
    --warning-soft: #372c14;
    --info: #6cb4ff;
    --info-soft: #172539;

    --overlay: rgb(0 0 0 / 60%);
    --shadow-color: rgb(0 0 0 / 45%);
    --skeleton: #222a33;
    --bg-inverse: #171c22;

    --presence-online: #43cf80;
    --presence-offline: #5f6b76;
    --chat-bg: #10161b;
    --bubble-in: #1e2630;
    --bubble-in-border: #1e2630;
    --bubble-out: #2b5278;
    --bubble-out-border: #2b5278;
    --bubble-meta: #93a7ba;
    --quote-bg: rgb(255 255 255 / 7%);
    --quote-accent: #6cb4ff;
    --glass-background: linear-gradient(135deg, rgb(30 38 46 / 72%), rgb(20 26 32 / 55%));
    --glass-fallback-background: rgb(23 28 34 / 94%);
}


 .promo-page[data-promo="webchat"]{--wc-ink:#f5f6f8;--wc-muted:#a1a7b2;--wc-paper:#080a0e;--wc-cream:#0d1017;--wc-accent:#dce8ff;--wc-line:#2c323e;--wc-surface:#151a24;--wc-hover:#ffffff;--wc-soft:#1e2635;--wc-selected:#263246;--wc-avatar:#333a48;--wc-subtle:#becde7;--wc-dark:#05070b;--wc-on-dark:#f5f6f8;--wc-on-dark-muted:#a1a7b2;--wc-telegram:#319ecc;--wc-whatsapp:#42a875;--wc-max:#8560dc;--wc-instagram:#da6e86;--wc-service:#292b40;--wc-support:#223140;--wc-light:#ffffff;--wc-glow:#829ed0;--wc-glass:linear-gradient(135deg,rgb(225 236 255 / 12%),rgb(130 150 183 / 4%));--lh-tight:1.08;--radius-l:28px;--radius-m:18px;--radius-s:10px}
.promo-page[data-promo="webchat"] h2{--fs-display:clamp(38px,4.05vw,58px)}
.promo-page[data-promo="webchat"] .wc-hero h1{--fs-display:clamp(46px,4.7vw,68px)}
.promo-page[data-promo="webchat"] .wc-hero__photo{--radius-l:32px}
.promo-page[data-promo="webchat"] .wc-orbit{--radius-l:40px}
.promo-page[data-promo="webchat"] .wc-hero__seal{--fs-display:72px}
.promo-page[data-promo="webchat"] .wc-channel-bridge b{--fs-display:34px}
.promo-page[data-promo="webchat"] .wc-eva-star{--fs-display:190px}
.promo-page[data-promo="webchat"] .wc-steps li>span{--fs-display:38px}
.promo-page[data-promo="webchat"] .wc-final h2{--fs-display:clamp(46px,5.7vw,82px)}
.promo-page[data-promo="webchat"] .wc-final__orb::after{--fs-display:400px}
@media(max-width:1150px){.promo-page[data-promo="webchat"] .wc-hero h1{--fs-display:58px}}
@media(max-width:900px){.promo-page[data-promo="webchat"] .wc-hero h1{--fs-display:48px}}
@media(max-width:680px){.promo-page[data-promo="webchat"] .wc-hero h1{--fs-display:clamp(43px,10.8vw,68px)}.promo-page[data-promo="webchat"] h2{--fs-display:38px}.promo-page[data-promo="webchat"] .wc-eva-star{--fs-display:170px}.promo-page[data-promo="webchat"] .wc-final h2{--fs-display:48px}}
@media(max-width:360px){.promo-page[data-promo="webchat"] .wc-hero h1{--fs-display:40px}.promo-page[data-promo="webchat"] .wc-final h2{--fs-display:42px}}
@media(min-width:1100px){.promo-page[data-promo="webchat"] .wc-demo-copy h2{--fs-display:clamp(32px,3.25vw,46px)}}
@media(min-width:1100px) and (max-height:750px){.promo-page[data-promo="webchat"] .wc-demo-copy h2{--fs-display:36px}}
.promo-page[data-promo="webchat"] .wc-ai-metric strong{--fs-display:clamp(76px,8vw,120px)}