/**
 * Nexus — Design Tokens v3 (Obsidian / Glass).
 * Типографика: Onest + JetBrains Mono. Подключать первым (до style.css).
 */
:root {
    /* ─── Шрифты (см. @import в style.css) ─────────────────── */
    --font-display: "Onest", ui-sans-serif, system-ui, sans-serif;
    --font-ui:      "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

    /* ─── Типографика: шкала размеров ───────────────────────── */
    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-lg:   16px;
    --text-xl:   20px;
    --text-2xl:  26px;
    --text-3xl:  32px;
    --text-4xl:  40px;

    /* ─── Поверхности (obsidian + холодный индиго) ───────────── */
    --surface-0:        #05080f;
    --surface-1:        #0a101c;
    --surface-2:        #0f1829;
    --surface-elevated: #162236;

    /* ─── Стекло (glassmorphism) ─────────────────────────────── */
    --glass-card:        rgba(17, 22, 39, 0.55);
    --glass-card-hover:  rgba(24, 32, 51, 0.68);
    --glass-card-active: rgba(28, 38, 60, 0.75);
    --glass-border:      rgba(255, 255, 255, 0.08);
    --glass-border-hover:rgba(255, 255, 255, 0.14);
    --glass-blur:        blur(20px);
    --glass-blur-sm:     blur(12px);
    --glass-blur-dock:   blur(20px);
    --glass-highlight:   inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --glass-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 0.12);

    /* ─── Границы ────────────────────────────────────────────── */
    --hairline:      rgba(255, 255, 255, 0.05);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default:rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.16);

    /* ─── Тени ───────────────────────────────────────────────── */
    --shadow-glass:
        0 4px 24px rgba(0, 0, 0, 0.40),
        0 1px 3px   rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --shadow-glass-hover:
        0 8px 40px  rgba(0, 0, 0, 0.50),
        0 2px 6px   rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --shadow-glass-lg:
        0 16px 56px rgba(0, 0, 0, 0.55),
        0 4px 12px  rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --shadow-glow:
        0 0 24px color-mix(in srgb, var(--accent-primary) 28%, transparent);
    --shadow-glow-sm:
        0 0 12px color-mix(in srgb, var(--accent-primary) 20%, transparent);
    /* Обратная совместимость с cards/monitoring */
    --shadow-diffuse: 0 8px 40px rgba(0, 0, 0, 0.42);
    --shadow-contact: 0 2px 8px  rgba(0, 0, 0, 0.32);
    --shadow-card-bento: var(--shadow-glass);
    --shadow-inset-highlight: var(--glass-highlight);

    /* ─── Материалы (обратная совместимость) ────────────────── */
    --material-sidebar: var(--glass-card);
    --material-card:    var(--glass-card);
    --material-topbar:  rgba(7, 10, 18, 0.82);

    /* ─── Скругления ─────────────────────────────────────────── */
    --radius-bento-card: clamp(16px, 2vw, 22px);
    --radius-control:    10px;
    --radius-pill:       999px;
    --radius-window:     var(--radius-bento-card);
    --radius-sm:         8px;
    --radius-md:         var(--radius-control);
    --radius-lg:         var(--radius-bento-card);
    --radius-xl:         var(--radius-bento-card);

    /* ─── Motion: кривые ─────────────────────────────────────── */
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);
    --ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 1);
    /* Обратная совместимость */
    --ease-bento:   var(--ease-spring);

    /* ─── Motion: длительности ───────────────────────────────── */
    --dur-fast:         150ms;
    --dur-base:         220ms;
    --dur-reveal:       300ms;
    --dur-slow:         480ms;
    --dur-bg:           90s;
    /* Обратная совместимость */
    --dur-bento-reveal: var(--dur-reveal);

    /* ─── Отступы ─────────────────────────────────────────────── */
    --spacing-bento-gap: clamp(16px, 2vw, 24px);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;

    /* ─── Focus-кольца ───────────────────────────────────────── */
    --focus-ring-width:  2px;
    --focus-ring-offset: 2px;

    /* ─── Фон: aurora-параметры ─────────────────────────────── */
    --aurora-opacity: 0.58;
    --aurora-accent-strength: 8%;
}

/* ─── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast:   0.01ms;
        --dur-base:   0.01ms;
        --dur-reveal: 0.01ms;
        --dur-slow:   0.01ms;
    }

    body::before,
    body::after {
        animation: none !important;
    }

    *,
    *::before,
    *::after {
        animation-duration:       0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:      0.01ms !important;
        scroll-behavior:          auto !important;
    }
}

/* ─── Keyframes ──────────────────────────────────────────────── */

/* Карточки: fade + blur-in + slide (160ms) */
@keyframes glassReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Элементы снизу с упругим spring */
@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Фоновый aurora blob (три слоя — одинаковая физика на всех страницах) */
@keyframes auroraFlow {
    0%   { background-position: 12% 28%, 88% 72%, 48% 52%; }
    100% { background-position: 84% 42%, 18% 62%, 62% 38%; }
}

/* Pulse-кольцо для online-индикаторов */
@keyframes pulseRing {
    0% {
        box-shadow:
            0 0 0 0   color-mix(in srgb, var(--online, #34d399) 55%, transparent),
            0 0 0 0   color-mix(in srgb, var(--online, #34d399) 25%, transparent);
    }
    60% {
        box-shadow:
            0 0 0 5px color-mix(in srgb, var(--online, #34d399) 0%, transparent),
            0 0 0 10px color-mix(in srgb, var(--online, #34d399) 0%, transparent);
    }
    100% {
        box-shadow:
            0 0 0 0   color-mix(in srgb, var(--online, #34d399) 0%, transparent),
            0 0 0 0   color-mix(in srgb, var(--online, #34d399) 0%, transparent);
    }
}

/* Shimmer для скелетон-загрузки */
@keyframes shimmerSweep {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Страничный fade */
@keyframes pageFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* Обратная совместимость с bentoReveal */
@keyframes bentoReveal {
    from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Pulse online dot (обратная совместимость) */
@keyframes pulseOnline {
    0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--online, #34d399) 50%, transparent); }
    70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--online, #34d399) 0%, transparent); }
    100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--online, #34d399) 0%, transparent); }
}

/* Aurora halo (обратная совместимость) */
@keyframes auraHalo {
    0%, 100% {
        box-shadow: 0 0 16px color-mix(in srgb, var(--accent-primary) 22%, transparent);
    }
    50% {
        box-shadow: 0 0 28px color-mix(in srgb, var(--accent-primary) 34%, transparent);
    }
}