/*
 * ===========================================
 *         CSS ПЕРЕМЕННЫЕ — AviaTrack
 *         Редизайн v2 (май 2026)
 * ===========================================
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
    /* ── Типографика ── */
    --font-base:  'Plus Jakarta Sans', system-ui, sans-serif;
    --font-mono:  'DM Mono', 'Courier New', monospace;

    /* ── Цвета бренда ── */
    --color-blue:       oklch(52% 0.22 255);
    --color-blue-dk:    oklch(40% 0.22 255);
    --color-blue-lt:    oklch(95% 0.06 255);
    --color-blue-xlt:   oklch(98% 0.025 255);

    --color-amber:      oklch(72% 0.18 55);
    --color-amber-lt:   oklch(96% 0.05 70);

    --color-green:      oklch(58% 0.18 155);
    --color-green-lt:   oklch(95% 0.05 155);

    --color-red:        oklch(56% 0.2 20);
    --color-red-lt:     oklch(97% 0.03 20);

    /* ── Нейтральные ── */
    --color-bg:         oklch(97% 0.005 250);
    --color-surface:    #ffffff;
    --color-border:     oklch(91% 0.005 250);
    --color-border-md:  oklch(85% 0.007 250);

    --color-text:       oklch(16% 0.015 250);
    --color-text-md:    oklch(38% 0.01 250);
    --color-text-lt:    oklch(58% 0.008 250);

    /* ── Тёмная тема (сайдбар) ── */
    --color-navy:       oklch(18% 0.06 258);
    --color-navy-md:    oklch(25% 0.07 258);
    --color-navy-lt:    oklch(32% 0.08 258);

    /* ── Алиасы (совместимость со старым кодом) ── */
    --color-primary:        var(--color-blue);
    --color-primary-hover:  var(--color-blue-dk);
    --color-success:        var(--color-green);
    --color-danger:         var(--color-red);
    --color-warning:        var(--color-amber);

    --color-gray-50:   oklch(98.5% 0.003 250);
    --color-gray-100:  oklch(96%   0.004 250);
    --color-gray-200:  oklch(91%   0.005 250);
    --color-gray-300:  oklch(85%   0.007 250);
    --color-gray-400:  oklch(70%   0.008 250);
    --color-gray-500:  oklch(58%   0.008 250);
    --color-gray-600:  oklch(45%   0.009 250);
    --color-gray-700:  oklch(35%   0.01  250);
    --color-gray-800:  oklch(25%   0.012 250);
    --color-gray-900:  oklch(16%   0.015 250);

    /* ── Отступы ── */
    --spacing-xs:  4px;
    --spacing-sm:  8px;
    --spacing-md:  16px;
    --spacing-lg:  24px;
    --spacing-xl:  32px;

    /* ── Скругления ── */
    --radius-sm:  6px;
    --radius-md:  9px;
    --radius-lg:  12px;
    --radius-xl:  14px;
    --radius-2xl: 18px;

    /* ── Тени ── */
    --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-md:  0 4px 16px -2px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 8px 28px -4px rgba(0, 0, 0, 0.12);
    --shadow-xl:  0 20px 40px -8px rgba(0, 0, 0, 0.15);

    /* ── Переходы ── */
    --transition-fast:   0.12s ease;
    --transition-normal: 0.2s ease;
    --transition-slow:   0.35s ease;

    /* ── Z-index ── */
    --z-dropdown:       1000;
    --z-sticky:         1020;
    --z-fixed:          1030;
    --z-modal-backdrop: 1040;
    --z-modal:          1050;
    --z-toast:          1090;

    /* ── Layout ── */
    --sidebar-width:    290px;
    --topbar-height:    48px;
    --header-mobile:    52px;
}