/* Дизайн-токены «Айдентеи».
 *
 * Единственный источник цветов, шрифтов и отступов для лендинга, чата,
 * страниц входа/регистрации и юридических страниц. Собственные значения
 * (#0d6efd, #f8f9fa и прочие остатки бутстраповской палитры) в шаблонах
 * не задаём — только переменные отсюда.
 *
 * КОНТРАСТ. Значения ниже посчитаны по WCAG 2.1 для пары «текст на фоне».
 * Порог AA: 4.5:1 для обычного текста, 3:1 для крупного (≥ 18.66px жирный
 * или ≥ 24px) и для нетекстовых элементов (рамки, иконки).
 * Три правила, которые нельзя нарушать:
 *   1) --steel (3.9:1 на молочном) — НЕ для текста, только линии и иконки.
 *      Для мелкого служебного текста есть --steel-ink (5.4:1).
 *   2) Заливка кнопок с белой подписью — только --copper-dark (4.8:1).
 *      На --copper белый текст даёт 3.4:1 и порог не проходит.
 *   3) --copper как цвет текста на светлом фоне не использовать (3.0:1).
 *      На молочном он даёт 2.99:1 и порог для нетекстовых элементов тоже не
 *      проходит, поэтому значимые границы (рамка активного поля, иконка-кнопка)
 *      рисуем --copper-dark (4.2:1), а --copper остаётся декоративным:
 *      заливки, подчёркивания, ховер.
 *
 * Проверка: python3 scripts/check_contrast.py
 */

:root {
    /* ── Палитра ─────────────────────────────────────────────────────────── */

    /* Тёмные тона: заголовки, пузырь сообщения пользователя, шапка */
    --graphite: #26334b;        /* на --milk: 11.2:1 */
    --graphite-soft: #30405e;
    --ink: #202a3c;             /* основной текст, на --milk: 12.7:1 */

    /* Светлые тона: фоны */
    --milk: #f6f0e6;            /* фон страницы */
    --milk-deep: #ece3d5;       /* фон вложенных блоков */
    --paper: #fffdf8;           /* карточки, пузырь ответа ассистента */
    --paper-warm: #fbf7ef;

    /* Акцент */
    --copper: #d56e55;          /* рамки, иконки, ховер — НЕ текст (3.0:1) */
    --copper-dark: #b95342;     /* заливка кнопок под белым текстом (4.8:1) */
    --coral-light: #f39a7e;     /* акцент на тёмном фоне */

    /* Служебные */
    --steel: #707886;           /* линии, иконки — НЕ мелкий текст (3.9:1) */
    --steel-ink: #5a6272;       /* служебный текст: время, метки (5.4:1) */
    --line: #202a3c24;          /* разделители */

    /* Тёмный фон (финальные секции лендинга) */
    --night: #101a2d;
    --night-soft: #1b2d49;

    /* Полупрозрачные производные (в CSS нельзя добавить альфу к переменной,
     * поэтому держим их здесь, а не подмешиваем в стилях по месту).
     * --overlay-night — затемнение под модальными листами (--night, 60 %);
     * --focus-ring — кольцо вокруг поля, в котором стоит курсор
     *   (--graphite, 20 %). Медным его делать нельзя: на светлом фоне
     *   --copper-dark читается как красный, и поле в фокусе выглядит
     *   ошибочным. Красный остаётся признаком настоящей ошибки;
     * --danger-ring — то же кольцо у поля с ошибкой (--danger, 20 %). */
    --overlay-night: #101a2d99;
    --focus-ring: #26334b33;
    --danger-ring: #a3372633;

    /* Смысловые оттенки блоков */
    --sage: #dce8df;
    --sky: #dfeaf0;
    --sun: #f3cf84;

    /* Состояния. Проверены на --paper и --milk как фон под тёмным текстом. */
    --success: #2f6b4f;
    --success-bg: #e6f0e9;
    --warning: #8a5a12;
    --warning-bg: #faefd9;
    --danger: #a33726;
    --danger-bg: #f8e5e0;
    --info-bg: var(--sky);

    /* ── Типографика ─────────────────────────────────────────────────────── */

    --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    /* Мобильные значения — базовые (mobile-first). Ниже 16px не опускаемся
     * нигде, где есть поле ввода: iOS Safari принудительно масштабирует
     * страницу при фокусе на поле с меньшим шрифтом. */
    --text-body: 1.0625rem;     /* 17px — тело сообщений и основной текст */
    --text-support: 0.9375rem;  /* 15px — вспомогательный текст */
    --text-label: 0.8125rem;    /* 13px — метки, время; только --steel-ink */
    --text-input: 1rem;         /* 16px — минимум для полей ввода */

    --leading-body: 1.6;
    --leading-tight: 1.25;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ── Геометрия ───────────────────────────────────────────────────────── */

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-bubble: 18px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* Минимальный размер интерактивного элемента для пальца */
    --tap-target: 44px;
    /* Высота полей ввода и основных кнопок на мобильном */
    --control-height: 48px;

    --shadow-sm: 0 1px 2px #202a3c14;
    --shadow-md: 0 6px 20px #202a3c1f;

    /* Безопасные зоны (вырез, индикатор home на iPhone).
     * Требуют viewport-fit=cover в мета-теге viewport. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    --header-height: 56px;
    --content-max: 720px;       /* комфортная ширина колонки текста */

    --z-header: 1020;
    --z-sheet: 1050;
    --z-banner: 1080;
}

/* На больших экранах текст чуть крупнее: читают с большего расстояния. */
@media (min-width: 768px) {
    :root {
        --text-body: 1.125rem;      /* 18px */
        --text-support: 1rem;       /* 16px */
        --header-height: 64px;
    }
}

/* Уважаем системную настройку «уменьшить движение». */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}