/*
 * 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 увеличивает страницу).
 *  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%);
}