/* ============================================================================
   variables.css — Дизайн-токены LV BET
   Тема: «неоновая ночь» — тёмный графит + кислотно-лаймовый неон.
   ========================================================================== */

:root {
    /* ── Палитра ─────────────────────────────────────────────────────────── */
    --bg-0: #0B0E11;      /* самый тёмный фон страницы */
    --bg-1: #12171C;      /* панели/карточки */
    --bg-2: #1A2129;      /* поднятые элементы, hover */
    --bg-3: #222C36;      /* активные состояния */
    --stroke: #263039;    /* тонкие бордеры */
    --stroke-soft: #1c242c;

    --text-0: #F4F7FA;    /* основной текст */
    --text-1: #9BA7B4;    /* вторичный текст */
    --text-2: #64707C;    /* приглушённый текст */

    --accent: #C6FF00;    /* лайм-неон — CTA, коэффициенты, лого */
    --accent-ink: #0B0E11;/* текст на акцентной заливке */
    --accent-2: #FFC400;  /* золото — призы, джекпот */
    --accent-glow: rgba(198, 255, 0, .35);
    --accent-glow-strong: rgba(198, 255, 0, .55);
    --gold-glow: rgba(255, 196, 0, .30);

    --live: #FF3B3B;      /* пульсирующий индикатор LIVE */
    --up: #2ECC71;        /* рост коэффициента */
    --down: #FF5A5A;      /* падение коэффициента */

    /* ── Градиенты ───────────────────────────────────────────────────────── */
    --grad-hero: radial-gradient(120% 140% at 50% -10%, #163a1e 0%, #0f2416 34%, #0B0E11 72%);
    --grad-lime: linear-gradient(120deg, #d4ff2e 0%, #C6FF00 45%, #a5e000 100%);
    --grad-panel: linear-gradient(180deg, rgba(26, 33, 41, .9) 0%, rgba(18, 23, 28, .9) 100%);
    --grad-fade: linear-gradient(180deg, transparent, var(--bg-0));

    /* ── Типографика ─────────────────────────────────────────────────────── */
    /* Display: технический condensed grotesque (DIN-семейство).            */
    --font-display: 'Bahnschrift', 'DIN Condensed', 'Oswald', 'Archivo Narrow',
                    'Impact', 'Segoe UI', system-ui, sans-serif;
    /* Body: чистый гуманистический sans.                                    */
    --font-body: 'Inter', 'Segoe UI Variable', 'Segoe UI', -apple-system,
                 BlinkMacSystemFont, system-ui, 'Helvetica Neue', Arial, sans-serif;

    /* Модульная шкала */
    --fs-12: 0.75rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-20: 1.25rem;
    --fs-28: 1.75rem;
    --fs-40: 2.5rem;
    --fs-64: 4rem;

    /* ── Радиусы ─────────────────────────────────────────────────────────── */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-pill: 999px;

    /* ── Тени / свечения ─────────────────────────────────────────────────── */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55);
    --glow-cta: 0 0 0 1px rgba(198, 255, 0, .5), 0 8px 26px var(--accent-glow);
    --glow-cta-hover: 0 0 0 1px rgba(198, 255, 0, .8), 0 10px 40px var(--accent-glow-strong);

    /* ── Раскладка ───────────────────────────────────────────────────────── */
    --header-h: 64px;
    --mobilenav-h: 62px;
    --maxw: 1280px;
    --gutter: 16px;

    /* ── Тайминги ────────────────────────────────────────────────────────── */
    --t-fast: .16s;
    --t-med: .28s;
    --t-slow: .5s;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    --z-header: 100;
    --z-drawer: 200;
    --z-betslip: 150;
    --z-modal: 300;
    --z-toast: 400;
    --z-cookie: 350;
}

@media (min-width: 1024px) {
    :root {
        --header-h: 72px;
        --gutter: 24px;
    }
}