/*
 * ATWIN — design tokens (единственный источник правды).
 * Палитра: #592563 (фиолетовый), #2a2373 (индиго) — основные;
 * #dc711f (оранжевый) — акцент; #93569f (светлый баклажан) — градиенты/glow;
 * тёмные базы #0e0b1e / #1a1440.
 *
 * Все значения — CSS-переменные. Производные оттенки считаются через
 * color-mix() с заранее посчитанным hex-фолбэком (объявлен строкой выше),
 * поэтому старые браузеры получают корректный цвет.
 */

:root {
    color-scheme: dark;

    /* ── Бренд ─────────────────────────────────────────────── */
    --c-plum: #592563;
    --c-indigo: #2a2373;
    --c-accent: #dc711f;
    --c-accent-hi: #ea8a44;
    --c-plum-light: #93569f;

    /* ── Базы / поверхности ────────────────────────────────── */
    --c-bg: #0e0b1e;
    --c-bg-2: #110d24;
    --c-surface: #1a1440;
    --c-surface-2: #241a52;
    --c-surface-3: #2f2368;

    /* ── Текст ─────────────────────────────────────────────── */
    --c-text: #f7f8fc;      /* контраст ≥ 15:1 на --c-bg */
    --c-muted: #c2c8da;      /* контраст ≈ 11:1 на --c-bg (AA/AAA) */
    --c-muted-2: #9aa2b8;    /* контраст ≈ 7:1  на --c-bg (AA) */
    --c-on-accent: #17110a;  /* текст на оранжевом */

    /* ── Границы ───────────────────────────────────────────── */
    --c-border: rgba(255, 255, 255, 0.10);
    --c-border-strong: rgba(255, 255, 255, 0.20);
    --c-border-hi: rgba(220, 113, 31, 0.55);

    /* ── Семантика статусов ────────────────────────────────── */
    --c-success: #34d399;
    --c-warning: #fbbf24;
    --c-error: #ff8098;

    /* ── Градиенты ─────────────────────────────────────────── */
    --grad-brand: linear-gradient(100deg, var(--c-plum-light), var(--c-accent));
    --grad-brand-soft: linear-gradient(100deg, #93569f, #ea8a44);
    --grad-plum: linear-gradient(140deg, var(--c-indigo), var(--c-plum));
    --grad-surface: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
    --grad-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    --grad-accent: linear-gradient(120deg, var(--c-accent), var(--c-accent-hi));

    /* ── Тени и свечения ───────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 6px 16px -6px rgba(0, 0, 0, 0.55);
    --shadow-md: 0 16px 40px -14px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, 0.8);
    --shadow-glow-accent: 0 0 0 1px rgba(220, 113, 31, 0.4), 0 18px 50px -14px rgba(220, 113, 31, 0.6);
    --shadow-glow-plum: 0 0 0 1px rgba(147, 86, 168, 0.4), 0 18px 50px -14px rgba(147, 86, 168, 0.6);
    --shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --focus-ring: 0 0 0 3px rgba(220, 113, 31, 0.65), 0 0 0 6px rgba(220, 113, 31, 0.18);

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

    /* ── Отступы (шаг 4px) ─────────────────────────────────── */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    --sp-32: 8rem;

    /* ── Типографика ───────────────────────────────────────── */
    --font-display: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --fs-display: clamp(2.6rem, 6.2vw, 4.6rem);
    --fs-h1: clamp(2.1rem, 4.6vw, 3.4rem);
    --fs-h2: clamp(1.7rem, 3.2vw, 2.6rem);
    --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
    --fs-h4: 1.15rem;
    --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);
    --fs-body: 1rem;
    --fs-sm: 0.925rem;
    --fs-xs: 0.8125rem;

    --lh-tight: 1.06;
    --lh-snug: 1.28;
    --lh-normal: 1.65;

    --track-tight: -0.02em;
    --track-wide: 0.14em;

    /* ── Движение ──────────────────────────────────────────── */
    --dur-1: 120ms;
    --dur-2: 240ms;
    --dur-3: 380ms;
    --dur-4: 640ms;
    --dur-5: 1000ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Слои (z-index) ────────────────────────────────────── */
    --z-bg: 0;
    --z-base: 1;
    --z-float: 90;
    --z-nav: 100;
    --z-drawer: 120;
    --z-progress: 140;
    --z-modal: 200;
    --z-toast: 300;
    --z-preloader: 400;

    /* ── Сетка ─────────────────────────────────────────────── */
    --container: 1200px;
    --container-wide: 1320px;
    --gutter: clamp(1rem, 4vw, 1.5rem);
    --header-h: 68px;

    /* ── Производные (hex-фолбэк; цвет корректно считается через color-mix) ── */
    --c-surface-hi: #2a2058;
    --bg-page: radial-gradient(1200px 700px at 15% -10%, rgba(147, 86, 168, 0.16), transparent 60%),
               radial-gradient(1000px 640px at 100% 0%, rgba(42, 35, 115, 0.45), transparent 55%),
               radial-gradient(900px 600px at 80% 110%, rgba(220, 113, 31, 0.10), transparent 60%),
               var(--c-bg);
}

@supports (color: color-mix(in srgb, red, blue)) {
    :root {
        --c-surface-hi: color-mix(in srgb, var(--c-surface) 82%, white);
        --c-border-hi: color-mix(in srgb, var(--c-accent) 55%, transparent);
    }
}

/* Повышенная контрастность: усиливаем границы и muted-текст. */
@media (prefers-contrast: more) {
    :root {
        --c-muted: #e2e6f0;
        --c-muted-2: #c8cee0;
        --c-border: rgba(255, 255, 255, 0.28);
        --c-border-strong: rgba(255, 255, 255, 0.5);
    }
}