/* =============================================================
 * tokens.css — ЕДИНСТВЕННЫЙ источник дизайн-токенов проекта.
 *
 * Подключается ПЕРВЫМ во всех трёх интерфейсах:
 *   • публичный сайт + кабинет — includes/header.php
 *   • веб-админка             — admin/config.php, admin/login.php
 *   • мини-апп MAX            — webapp/index.php
 *
 * Раньше эти же переменные были скопированы в :root каждого из трёх CSS —
 * оттуда и расхождения (в мини-аппе, например, просто не было --accent-hover
 * и --brand-hover). Здесь они объявлены один раз.
 *
 * ЧТО ПЕРЕОПРЕДЕЛЯТЬ НА МЕСТЕ: только намеренные различия интерфейса.
 * Сейчас это скругления и safe-area мини-аппа (см. :root в webapp/css/app.css).
 * Цвета и шрифты не переопределять нигде — они общие по определению.
 * ============================================================= */

:root {
    /* ---------- Поверхности ---------- */
    --bg: #0a0d12;
    --surface: #12151c;
    --surface-hover: #171b24;
    --surface-2: #171b24;
    --border: #1f2430;
    --border-strong: #2a3040;

    /* ---------- Текст ---------- */
    --text-primary: #eef1f7;
    --text-secondary: #8b93a5;
    --text-muted: #5a6478;

    /* ---------- Акценты ---------- */
    --accent: #3ea6ff;
    --accent-hover: #63b8ff;
    --accent-dim: rgba(62, 166, 255, 0.12);
    --brand: #ff6b35;
    --brand-hover: #ff8156;
    --brand-dim: rgba(255, 107, 53, 0.12);
    --success: #5fd88a;
    --success-dim: rgba(95, 216, 138, 0.12);
    --warning: #f5a623;
    --warning-dim: rgba(245, 166, 35, 0.12);
    --danger: #e25c5c;
    --danger-dim: rgba(226, 92, 92, 0.12);

    /* ---------- Форма ----------
     * Дефолт = сайт + админка. Мини-апп переопределяет их у себя (крупнее, «мобильнее»). */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* ---------- Типографика ---------- */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* ---------- Движение ----------
     * Единая шкала. До неё в проекте вперемешку жили .12s / .15s / 0.15s / .18s /
     * 0.2s / 0.25s / 0.3s / 0.7s / 0.8s — из-за чего одинаковые по смыслу действия
     * ощущались по-разному в разных разделах.
     *
     * Как выбирать:
     *   --dur-fast  — микро-отклик: hover, нажатие, галочка чекбокса, смена цвета
     *   --dur-base  — обычный переход: кнопки, вкладки, бейджи (значение по умолчанию)
     *   --dur-slow  — раскрытие: модалки, шторки, аккордеоны, панели
     *   --dur-exit  — закрытие. Намеренно быстрее входа: уход не должен задерживать
     *                 пользователя, он уже принял решение.
     */
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 280ms;
    --dur-exit: 120ms;

    /* Вход — замедление к концу (ease-out), выход — ускорение (ease-in). */
    --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* Уважаем системную настройку «уменьшить движение»: анимации не выключаем совсем
 * (иначе теряется обратная связь), а схлопываем до мгновенных. Одно место на весь
 * проект — вместо @media в каждом файле. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0.01ms;
        --dur-base: 0.01ms;
        --dur-slow: 0.01ms;
        --dur-exit: 0.01ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* §5 документа: правило обязано быть во всех интерфейсах, иначе не скрываются
 * панели и бары. Раньше его требовалось дублировать руками в трёх CSS — теперь
 * оно живёт здесь и приезжает во все три автоматически. */
[hidden] {
    display: none !important;
}