/* =====================================================================
   Another World — дизайн-токены (единственный источник правды)
   Подключать ПЕРВЫМ на каждой новой странице:
     <link rel="stylesheet" href="/vendor/fonts.css">
     <link rel="stylesheet" href="/vendor/aw-tokens.css">
   Правила и примеры — DESIGN.md в корне проекта.
   Новые цвета, шрифты, радиусы и тени не придумывать — брать отсюда.
   ===================================================================== */
:root {
    /* ---------- Цвет: фон и поверхности ---------- */
    --aw-bg:            #18181b;                    /* фон страниц */
    --aw-bg-deep:       #030303;                    /* самые тёмные зоны: hero, оверлеи */
    --aw-surface-1:     rgba(255, 255, 255, 0.02);  /* карточка на фоне */
    --aw-surface-2:     rgba(255, 255, 255, 0.04);  /* поднятая карточка */
    --aw-surface-3:     rgba(255, 255, 255, 0.07);  /* hover, активный элемент */
    --aw-glass:         rgba(15, 15, 15, 0.4);      /* стекло (с backdrop-filter) */
    --aw-line:          rgba(255, 255, 255, 0.08);  /* обычная граница */
    --aw-line-strong:   rgba(255, 255, 255, 0.12);  /* граница поля/кнопки */

    /* ---------- Цвет: текст ---------- */
    --aw-text:          #f5f5f5;
    --aw-text-muted:    rgba(255, 255, 255, 0.5);
    --aw-text-faint:    rgba(255, 255, 255, 0.28);

    /* ---------- Цвет: акцент (единственный брендовый) ---------- */
    --aw-accent:        #ff3b4e;
    --aw-accent-soft:   #ff5c6d;                    /* hover, текст-акцент на тёмном */
    --aw-accent-10:     rgba(255, 59, 78, 0.10);    /* фон бейджа/выделения */
    --aw-accent-25:     rgba(255, 59, 78, 0.25);    /* граница акцентной карточки */
    --aw-accent-glow:   rgba(255, 59, 78, 0.42);    /* свечение/тень акцентных кнопок */

    /* ---------- Цвет: статусы (только по смыслу) ---------- */
    --aw-ok:            #3ddc84;
    --aw-warn:          #ffb547;
    --aw-danger:        var(--aw-accent);

    /* ---------- Шрифты ---------- */
    --aw-font-display:  'Clash Display', 'Manrope', sans-serif;   /* заголовки, цифры-акценты */
    --aw-font-body:     'Manrope', system-ui, sans-serif;          /* весь текст */
    --aw-font-mono:     'JetBrains Mono', ui-monospace, monospace; /* время, коды, цены, техно-подписи */

    /* ---------- Типографика: шкала ---------- */
    --aw-fs-xs:   0.72rem;   /* подписи, бейджи (UPPERCASE + letter-spacing) */
    --aw-fs-sm:   0.85rem;   /* вторичный текст */
    --aw-fs-md:   1rem;      /* основной текст */
    --aw-fs-lg:   1.25rem;   /* подзаголовки карточек */
    --aw-fs-xl:   clamp(1.6rem, 3vw, 2.2rem);   /* заголовок секции */
    --aw-fs-hero: clamp(2.4rem, 6vw, 4.5rem);   /* hero */
    --aw-tracking-caps: 0.12em;                 /* для UPPERCASE-подписей */
    --aw-tracking-display: -0.01em;             /* для Clash Display */

    /* ---------- Отступы (шаг 4px) ---------- */
    --aw-space-1: 4px;
    --aw-space-2: 8px;
    --aw-space-3: 12px;
    --aw-space-4: 16px;
    --aw-space-5: 24px;
    --aw-space-6: 32px;
    --aw-space-7: 48px;
    --aw-space-8: 64px;
    --aw-space-9: 96px;      /* между секциями на десктопе */

    /* ---------- Радиусы ---------- */
    --aw-radius-sm:   8px;   /* мелкие элементы, бейджи */
    --aw-radius-md:   12px;  /* поля, кнопки */
    --aw-radius-lg:   16px;  /* карточки */
    --aw-radius-xl:   24px;  /* большие карточки, модалки */
    --aw-radius-pill: 999px; /* чипы, таблетки */

    /* ---------- Тени и свечение ---------- */
    --aw-shadow-card:   0 20px 40px -16px rgba(0, 0, 0, 0.6);
    --aw-shadow-accent: 0 12px 30px -12px var(--aw-accent-glow);
    --aw-blur-glass:    blur(18px) saturate(1.4);

    /* ---------- Движение ---------- */
    --aw-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);       /* основная кривая сайта */
    --aw-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* нажатия, «пружина» */
    --aw-dur-fast:    150ms;   /* hover, нажатие */
    --aw-dur-base:    300ms;   /* появление элементов */
    --aw-dur-slow:    600ms;   /* крупные переходы, листы */

    /* ---------- Сетка ---------- */
    --aw-container:   1200px;
    --aw-gutter:      16px;    /* боковой отступ на телефоне */
    /* Брейкпоинты (в @media нельзя var()): 480 / 768 / 1024 / 1280 px */

    /* ---------- Слои ---------- */
    --aw-z-nav: 100;
    --aw-z-modal: 1000;
    --aw-z-toast: 1100;
}

@media (prefers-reduced-motion: reduce) {
    :root { --aw-dur-fast: 1ms; --aw-dur-base: 1ms; --aw-dur-slow: 1ms; }
}