/*
 * Fortnite Universe — дизайн-токены.
 * ЕДИНСТВЕННОЕ место в проекте, где живут HEX, радиусы, тени и типографика.
 * Значения сняты пипеткой с визуального эталона 1fort.png (2.txt §152).
 * Тема светлая; тёмной темы по умолчанию нет.
 */

:root {
    /* Поверхности */
    --bg-page: #F5F7FB;
    --bg-card: #FFFFFF;
    --bg-soft: #EDF1FD;
    --bg-active: #E6ECFD;

    /* Брендовая тёмно-синяя оболочка: header, sidebar, footer */
    --brand-900: #1A2C72;
    --brand-800: #204173;
    --brand-600: #3C62A3;

    /* Действия */
    --primary: #3B65F8;
    --primary-600: #3761F7;

    /* Creator PRO, UEFN, Verse */
    --purple: #6850F5;
    --purple-400: #8962FD;

    /* Карта, Discover, графики */
    --cyan: #35A1FD;
    --cyan-300: #69B6FC;

    /* Смысловые: только по смыслу, не для украшения */
    --success: #2FB170;
    --warning: #F7AA46;
    --danger: #F96160;
    --danger-600: #FD4D54;

    /* Текст */
    --text-primary: #101828;
    --text-secondary: #5B6478;
    --text-muted: #98A2B3;
    --text-on-brand: #FFFFFF;
    --text-on-brand-muted: #B9C6EA;

    /* Границы и тени */
    --border: #E6EAF3;
    --border-brand: rgba(255, 255, 255, .14);
    --shadow-card: 0 6px 24px rgba(26, 44, 114, .06);
    --shadow-card-hover: 0 10px 32px rgba(26, 44, 114, .12);
    --shadow-header: 0 2px 12px rgba(26, 44, 114, .18);

    /* Радиусы */
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-card: 16px;
    --radius-panel: 22px;
    --radius-hero: 28px;
    --radius-pill: 999px;

    /* Типографика */
    --font-sans: 'Manrope', 'Inter', 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fs-h1: 48px;
    --fs-h2: 32px;
    --fs-h3: 22px;
    --fs-body: 16px;
    --fs-sm: 14px;
    --fs-xs: 13px;
    --lh-tight: 1.12;
    --lh-body: 1.55;

    /* Сетка и отступы */
    --container: 1440px;
    --content: 1320px;
    --gap: 24px;
    --gap-sm: 16px;
    --card-pad: 20px;
    --section-gap: 72px;
    --header-h: 68px;

    /* Прочее */
    --transition: 160ms ease;
    --tabbar-h: 62px;
}

@media (max-width: 1024px) {
    :root {
        --fs-h1: 38px;
        --fs-h2: 27px;
        --gap: 20px;
        --section-gap: 52px;
    }
}

@media (max-width: 768px) {
    :root {
        --fs-h1: 31px;
        --fs-h2: 24px;
        --fs-h3: 19px;
        --fs-body: 15px;
        --gap: 16px;
        --card-pad: 16px;
        --section-gap: 40px;
        --header-h: 60px;
        --radius-hero: 20px;
    }
}