/*
 * GTA UNIVERSE — дизайн-токены.
 * Единственное место, где живут «сырые» значения: цвет, кегль, радиус, тень,
 * отступ, размер контейнера, длительность анимации. В компонентных и страничных
 * стилях допускаются только var(--…). Хардкод цвета запрещён (ТЗ ч.3, разд. 96–97).
 *
 * Система выведена из эталона 1gta.png: светлый премиальный urban-UI, изумрудный
 * accent, мягкие тени, плотные данные, белые карточки на холодновато-тёплом фоне.
 */

:root {
    /* ==================================================================
     * 1. ЦВЕТ — нейтральная база (ТЗ ч.3, разд. 6)
     * ================================================================== */
    --bg-page: #F7F8F6;         /* фон страницы */
    --bg-card: #FFFFFF;         /* карточки, шапка, панели */
    --bg-warm: #FBFAF7;         /* тёплая подложка внутри карточек */
    --bg-soft: #EFF1EF;         /* soft graphite: треки баров, чипы, зебра таблиц */
    --bg-sunken: #F2F4F2;       /* утопленные области, поля поиска в шапке */
    --bg-translucent: rgba(255, 255, 255, .86); /* sticky-шапка поверх контента */

    --border: #E2E5E1;          /* основная граница */
    --border-strong: #D3D8D2;   /* граница на hover, разделители таблиц-заголовков */
    --border-soft: #ECEEEB;     /* очень лёгкие дивайдеры внутри плотных списков */

    --text-primary: #171A18;
    --text-secondary: #676D69;
    --text-muted: #969B97;      /* светлее нельзя: предел контраста на белом */
    --text-on-primary: #FFFFFF;

    /* Локальные тёмные блоки: код developer center, панель карты, hero-оверлей.
       Тёмной темы у портала нет (ТЗ ч.3, разд. 4–5). */
    --surface-dark: #1B1F1D;
    --surface-dark-soft: #262C28;
    --text-on-dark: #F3F5F3;
    --text-on-dark-muted: #A8AFAA;
    --overlay: rgba(23, 26, 24, .45);
    --overlay-soft: rgba(23, 26, 24, .16);

    /* ==================================================================
     * 2. ЦВЕТ — primary и акценты (ТЗ ч.3, разд. 7–8)
     * ================================================================== */
    --primary: #2F7D59;
    --primary-hover: #276B4C;
    --primary-active: #205A40;
    --primary-light: #EAF5EF;   /* подложка активного состояния, verified-бейдж */
    --primary-border: #C6E2D3;
    --primary-contrast: #FFFFFF;

    --accent-orange: #E08B43;
    --accent-orange-soft: #FFF1E4;
    --accent-blue: #3A8DA8;
    --accent-blue-soft: #E8F3F7;
    --accent-pink: #D95B87;
    --accent-pink-soft: #FCEDF2;
    --accent-purple: #7663B7;
    --accent-purple-soft: #F0EDF9;

    /* ==================================================================
     * 3. ЦВЕТ — статусы (ТЗ ч.3, разд. 116)
     * ================================================================== */
    --status-online: #2F9E62;
    --status-online-soft: #E7F5ED;
    --status-warning: #E08B43;
    --status-warning-soft: #FFF1E4;
    --status-offline: #C9483F;
    --status-offline-soft: #FBECEA;
    --status-neutral: #969B97;
    --status-neutral-soft: #EFF1EF;
    --status-info: #3A8DA8;
    --status-info-soft: #E8F3F7;

    --danger: #C9483F;
    --danger-hover: #B03B33;
    --danger-soft: #FBECEA;
    --success: #2F7D59;
    --success-soft: #EAF5EF;

    /* ==================================================================
     * 4. ЦВЕТ — графики (ТЗ ч.3, разд. 113–114): белый холст, тонкие оси,
     * зелёные и синие линии, мягкие заливки, без 3D.
     * ================================================================== */
    --chart-1: #2F7D59;
    --chart-2: #3A8DA8;
    --chart-3: #E08B43;
    --chart-4: #7663B7;
    --chart-5: #D95B87;
    --chart-6: #8A9A8F;
    --chart-grid: #ECEEEB;
    --chart-axis: #C9CEC9;
    --chart-fill-primary: rgba(47, 125, 89, .12);
    --chart-fill-blue: rgba(58, 141, 168, .12);

    /* ==================================================================
     * 5. ЦВЕТ — тематизация разделов (ТЗ ч.3, разд. 9–10).
     * Применяется точечно: hero, бейдж игры, подсветка таба. Карточки, кнопки,
     * инпуты, таблицы, типографика остаются общими для всего портала.
     * ================================================================== */
    --game-gta3: #6B7480;
    --game-gta3-soft: #EEF0F2;
    --game-vc: #D95B87;
    --game-vc-soft: #FCEDF2;
    --game-sa: #7E8B3F;
    --game-sa-soft: #F2F4E6;
    --game-gta4: #5A6B7A;
    --game-gta4-soft: #EDF1F4;
    --game-gta5: #2F7D59;
    --game-gta5-soft: #EAF5EF;
    --game-online: #E08B43;
    --game-online-soft: #FFF1E4;
    --game-gta6: #E4654F;
    --game-gta6-soft: #FDEEEA;
    --game-fivem: #5B5BD6;
    --game-fivem-soft: #EDEDFB;

    /* ==================================================================
     * 6. ТИПОГРАФИКА (ТЗ ч.3, разд. 11–12)
     * Manrope — весь интерфейс и статьи. Unbounded — только логотип,
     * section labels и маркетинговые заголовки, для текста запрещён.
     * ================================================================== */
    --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-display: 'Unbounded', var(--font-sans);
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Шкала: mobile 30–36 → desktop 46–58 для H1, далее по разд. 12. */
    --fs-h1: clamp(1.875rem, 1.05rem + 2.85vw, 3.5rem);   /* 30 → 56 */
    --fs-h2: clamp(1.5rem, 1.16rem + 1.18vw, 2.25rem);    /* 24 → 36 */
    --fs-h3: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem);    /* 20 → 24 */
    --fs-h4: clamp(1.0625rem, 1.02rem + 0.16vw, 1.1875rem); /* 17 → 19 */
    --fs-body-lg: 1.0625rem;    /* 17 — лиды, тело статьи */
    --fs-body: 1rem;            /* 16 — базовый интерфейсный */
    --fs-body-sm: 0.9375rem;    /* 15 — плотные таблицы, вторичный текст */
    --fs-small: 0.875rem;       /* 14 — подписи, метаданные */
    --fs-caption: 0.8125rem;    /* 13 — самый мелкий допустимый */
    --fs-label: 0.75rem;        /* 12 — только uppercase section labels и бейджи */

    --lh-tight: 1.08;           /* крупные заголовки */
    --lh-snug: 1.22;            /* H2–H4 */
    --lh-normal: 1.5;           /* интерфейс */
    --lh-relaxed: 1.65;         /* тело статьи */

    --ls-tight: -0.02em;        /* H1 */
    --ls-snug: -0.01em;         /* H2–H3 */
    --ls-normal: 0;
    --ls-wide: 0.12em;          /* uppercase section labels */

    /* ==================================================================
     * 7. ОТСТУПЫ — шаг 4px
     * ================================================================== */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Вертикальный ритм секций: desktop 56–80, mobile 32–48 */
    --section-gap: 72px;
    --section-gap-sm: 56px;
    --block-gap: 24px;

    /* ==================================================================
     * 8. СЕТКА И КОНТЕЙНЕРЫ (ТЗ ч.3, разд. 15)
     * ================================================================== */
    --container: 1400px;        /* 12 колонок */
    --container-narrow: 1120px; /* формы, настройки, узкие дашборды */
    --container-text: 820px;    /* ширина колонки статьи: 760–860 */
    --container-pad: 32px;
    --grid-columns: 12;
    --grid-gap: 24px;
    --grid-gap-sm: 16px;

    /* Брейкпоинты. В @media подставляются числом (CSS-переменные там не работают),
       эти токены — источник истины и точка чтения из JS.
       320 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920 */
    --bp-xs: 375px;
    --bp-sm: 430px;
    --bp-md: 768px;     /* планшет: 8 колонок */
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --bp-2xl: 1440px;
    --bp-3xl: 1920px;   /* дальше контейнер не растягивается */

    /* ==================================================================
     * 9. РАДИУСЫ (ТЗ ч.3, разд. 13). Всё pill-shaped делать запрещено.
     * ================================================================== */
    --radius-xs: 6px;
    --radius-sm: 8px;           /* бейджи, мелкие плашки */
    --radius-control: 11px;     /* кнопки, инпуты, селекты: 10–12 */
    --radius-card: 16px;        /* карточки: 14–18 */
    --radius-panel: 22px;       /* крупные панели: 20–24 */
    --radius-hero: 26px;        /* hero-блоки: 24–30 */
    --radius-pill: 999px;       /* только чипы, аватары, счётчики */

    /* ==================================================================
     * 10. ТЕНИ (ТЗ ч.3, разд. 14). Тяжёлых чёрных теней нет.
     * ================================================================== */
    --shadow-xs: 0 1px 2px rgba(25, 35, 30, .05);
    --shadow-card: 0 6px 24px rgba(25, 35, 30, .06);
    --shadow-elevated: 0 14px 40px rgba(20, 30, 25, .10);
    --shadow-overlay: 0 24px 64px rgba(20, 30, 25, .16);
    --shadow-header: 0 1px 0 var(--border);
    --shadow-bottom-nav: 0 -6px 24px rgba(25, 35, 30, .06);

    /* Фокус: видимое зелёное кольцо, на тёмном и цветном — циановое (ТЗ ч.4, разд. 129) */
    --focus-ring: 0 0 0 3px rgba(47, 125, 89, .30);
    --focus-ring-alt: 0 0 0 3px rgba(58, 141, 168, .38);
    --focus-outline-width: 2px;

    /* ==================================================================
     * 11. РАЗМЕРЫ ЭЛЕМЕНТОВ
     * ================================================================== */
    --header-h: 74px;           /* 70–78 по ТЗ ч.3, разд. 16 */
    --header-h-mobile: 60px;
    --bottom-nav-h: 64px;       /* мобильная нижняя навигация */
    --search-w-min: 340px;      /* поиск в шапке: 340–480 */
    --search-w-max: 480px;
    --drawer-w: 360px;          /* мобильное меню */

    --control-h-lg: 48px;
    --control-h-md: 42px;
    --control-h-sm: 34px;
    --control-h-xs: 28px;

    --icon-xs: 14px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 28px;            /* маркеры карты: 20–28 */

    --avatar-sm: 28px;
    --avatar-md: 36px;
    --avatar-lg: 48px;
    --avatar-xl: 72px;

    --border-w: 1px;
    --border-w-strong: 1.5px;

    /* Пропорции изображений (ТЗ ч.3, разд. 120) */
    --ratio-hero: 16 / 9;
    --ratio-vehicle: 16 / 10;
    --ratio-banner: 21 / 9;
    --ratio-card: 3 / 2;
    --ratio-square: 1 / 1;
    --ratio-portrait: 3 / 4;

    /* ==================================================================
     * 12. ДВИЖЕНИЕ (ТЗ ч.4, разд. 130): 160–240ms, без отскоков
     * ================================================================== */
    --dur-fast: 160ms;
    --dur-base: 200ms;
    --dur-slow: 240ms;
    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --transition-color: color var(--dur-fast) var(--ease-out),
                        background-color var(--dur-fast) var(--ease-out),
                        border-color var(--dur-fast) var(--ease-out);

    /* ==================================================================
     * 13. СЛОИ
     * ================================================================== */
    --z-base: 1;
    --z-sticky: 100;
    --z-dropdown: 200;
    --z-header: 300;
    --z-bottom-nav: 320;
    --z-drawer: 400;
    --z-modal: 500;
    --z-toast: 600;
    --z-tooltip: 700;
}

/* Планшет: 8 колонок, контейнер дышит меньше */
@media (max-width: 1024px) {
    :root {
        --container-pad: 24px;
        --grid-columns: 8;
        --grid-gap: 20px;
        --section-gap: 56px;
        --section-gap-sm: 44px;
    }
}

/* Мобилка: 4 колонки, свой ритм (32–48), уменьшенные радиусы панелей */
@media (max-width: 768px) {
    :root {
        --container-pad: 16px;
        --grid-columns: 4;
        --grid-gap: 12px;
        --section-gap: 44px;
        --section-gap-sm: 32px;
        --block-gap: 16px;
        --radius-panel: 18px;
        --radius-hero: 20px;
    }
}