/* =====================================================================
   ДИЗАЙН-ТОКЕНЫ (ФУНДАМЕНТ РЕДИЗАЙНА)
   =====================================================================
   Этот файл — единая точка правды для новых переиспользуемых компонентов
   (Button, Modal, Badge, FormField, EmptyState/SkeletonLoader) и экранов,
   переверстанных в рамках редизайна.

   Существующий :root-блок в styles.css (--color-*, --space-1..8,
   --font-size-*, --radius-*, --shadow-*) НЕ дублируется и НЕ меняется —
   старые экраны, которые ещё не переверстаны, продолжают на него
   опираться. Новые токены здесь либо ссылаются на существующие цвета
   (var(--color-primary-700) и т.д., подключается ПОСЛЕ styles.css видит
   тот же :root — значения те же), либо вводят новые имена с явным
   префиксом, чтобы не пересекаться со старыми (--sp-* вместо --space-*,
   т.к. --space-8 уже занят под 32px в старой шкале).
   ===================================================================== */

:root {
    /* ============ 8px SPACING SCALE (--sp-*) ============
       Используется всеми новыми компонентами. Старые --space-* (4px-шаг)
       остаются нетронутыми для уже существующей вёрстки. */
    --sp-0: 0px;
    --sp-half: 4px;
    /* половинный шаг для плотных иконок/чипов */
    --sp-1: 8px;
    --sp-2: 16px;
    --sp-3: 24px;
    --sp-4: 32px;
    --sp-5: 40px;
    --sp-6: 48px;
    --sp-8: 64px;

    /* ============ ТАЧ-ТАРГЕТЫ (mobile-first, велосипедист в перчатках) ============ */
    --tap-min: 44px;
    /* минимальный размер интерактивного элемента */
    --tap-gap-min: 8px;
    /* минимальный зазор между соседними тач-целями */

    /* ============ ИКОНКИ ============ */
    --icon-sm: 20px;
    --icon-md: 24px;
    --icon-lg: 32px;

    /* ============ Z-INDEX ШКАЛА ДЛЯ НОВЫХ КОМПОНЕНТОВ ============
       Существующие z-index в styles.css хаотичны (100..5555), поэтому
       новая шкала начинается выше самого высокого текущего значения —
       новые компоненты гарантированно поверх старых, без переписывания
       всего, что уже работает. */
    --z-dropdown: 5600;
    --z-modal-overlay: 6000;
    --z-modal-panel: 6001;
    --z-toast: 6100;

    /* ============ СЕМАНТИЧЕСКИЕ ЦВЕТА СТАТУСОВ УЧАСТНИКА ============
       FIN/DNS/DNF/DQ/NM/RACE — см. Badge-компонент. Цвета опираются на
       существующую палитру (--color-primary-700 и т.д.), чтобы не
       вводить новых оттенков в проект. */
    --color-status-fin: var(--color-primary-700);
    --color-status-fin-bg: rgba(0, 125, 28, 0.12);
    --color-status-race: var(--color-secondary-400);
    --color-status-race-bg: rgba(255, 135, 0, 0.14);
    --color-status-dns: var(--color-text-muted);
    --color-status-dns-bg: rgba(128, 128, 128, 0.14);
    --color-status-dnf: var(--color-secondary-600);
    --color-status-dnf-bg: rgba(166, 88, 0, 0.14);
    --color-status-dq: var(--color-danger);
    --color-status-dq-bg: rgba(220, 53, 69, 0.12);
    --color-status-nm: var(--color-accent-500);
    --color-status-nm-bg: rgba(203, 0, 119, 0.12);

    /* ============ КОНТРАСТНЫЕ ТЕКСТОВЫЕ ЦВЕТА ДЛЯ КОМПОНЕНТОВ (WCAG AA) ============ */
    --color-btn-primary-text: var(--color-surface);
    --color-btn-destructive-bg: var(--color-danger);
    --color-btn-destructive-bg-hover: var(--color-danger-dark);

    /* ============ ДВИЖЕНИЕ/АНИМАЦИЯ ============ */
    --motion-fast: 0.15s ease;
    --motion-base: 0.25s ease;
    --motion-slow: 0.4s ease;
}