/*
 * Дизайн-система Риторики — токены.
 *
 * Всё, что влияет на вид экрана, задаётся здесь и только здесь: цвета по
 * смыслу, шкала шрифта, отступы, форма. Компоненты (ui-components.css) и
 * экраны берут значения только через var(--…), литеральных цветов и размеров
 * в них нет. Поэтому новая тема — это один блок, переопределяющий эти же
 * переменные (например, :root[data-theme="dark"] { … }). Пока тема одна —
 * светлая.
 *
 * Справочник и правила: docs/design-system.md; живая витрина —
 * /components/admin/DesignSystemScreen.php.
 */
:root {
    /* color — surfaces */
    --color-bg: #f5f7fa;
    --color-surface: #ffffff;
    --color-surface-sunken: #f0f3f7;
    --color-line: #dfe4ea;
    --color-line-strong: #c5cdd6;

    /* color — text */
    --color-text: #1f2933;
    --color-text-muted: #5f6b7a;
    --color-text-on-accent: #ffffff;

    /* color — brand */
    --color-accent: #0066cc;
    --color-accent-hover: #0052a3;
    --color-accent-soft: #e6f0fa;

    /* color — status: meaning, never decoration */
    --color-ok: #1e7b3c;      --color-ok-soft: #e7f6ec;     /* готово */
    --color-warn: #9a5b00;    --color-warn-soft: #fff4e0;   /* скоро срок */
    --color-bad: #b42318;     --color-bad-soft: #fdecea;    /* проблема, просрочено */
    --color-info: #6b3fb5;    --color-info-soft: #f1eafb;   /* пояснение */

    /* type */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --text-xs: .78rem;
    --text-sm: .875rem;
    --text-md: 1rem;
    --text-lg: 1.15rem;
    --text-xl: 1.5rem;
    --weight-regular: 400;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading: 1.45;

    /* space */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* shape */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-pill: 999px;
    --shadow-dialog: 0 10px 40px rgba(16, 24, 40, .22);
    --focus-ring: 0 0 0 3px rgba(0, 102, 204, .35);
    --backdrop: rgba(16, 24, 40, .45);

    /* the smallest thing a finger must hit (meeting day, phone) */
    --tap-min: 40px;
}

/*
 * Тёмная тема: тот же набор цветовых переменных, другие значения. Включается
 * атрибутом data-theme="dark" на <html> (или на любом элементе — переменные
 * наследуются). Пока её используют экраны для зала (ТВ).
 */
[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0e1319;
    --color-surface: #161d26;
    --color-surface-sunken: #11171e;
    --color-line: #263140;
    --color-line-strong: #36445a;

    --color-text: #e8edf3;
    --color-text-muted: #9aa8ba;
    --color-text-on-accent: #0e1319;

    --color-accent: #4da3ff;
    --color-accent-hover: #7ab8ff;
    --color-accent-soft: #14283d;

    --color-ok: #5fcf85;      --color-ok-soft: #12261a;
    --color-warn: #f0b04a;    --color-warn-soft: #2d2210;
    --color-bad: #ff7b6e;     --color-bad-soft: #301816;
    --color-info: #b999f2;    --color-info-soft: #231a36;

    --shadow-dialog: 0 10px 40px rgba(0, 0, 0, .6);
    --focus-ring: 0 0 0 3px rgba(77, 163, 255, .5);
    --backdrop: rgba(0, 0, 0, .65);
}