/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — дизайн-токены: переменные, reset, базовые стили, утилиты
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Светлая тема ─────────────────────────────────────────────────────────── */
:root {
    /* Акцент */
    --accent:            #2563EB;
    --accent-hover:      #1D4ED8;
    --accent-light:      rgba(37, 99, 235, 0.06);
    --accent-light-hover:rgba(37, 99, 235, 0.10);

    /* Фоны */
    --bg:           #F9F9FB;
    --bg-card:      #FFFFFF;
    --bg-input:     #F4F4F6;
    --bg-input-hover:#EBEBEF;
    --bg-hover:     #EBEBEF;

    /* Границы */
    --border:        #E4E4E7;
    --border-strong: #D1D1D6;

    /* Текст */
    --text-primary:   #111118;
    --text-secondary: #5A5A6A;
    --text-muted:     #9090A0;
    --input-text:     #37352F;

    /* Статус-цвета */
    --success:       #0F7B3F;
    --success-light: rgba(15, 123, 63, 0.08);
    --danger:        #E03E3E;
    --danger-light:  rgba(224, 62, 62, 0.08);
    --warning:       #b45309;
    --warning-light: rgba(180, 83, 9, 0.08);

    /* Тени */
    --shadow:       0 1px 3px rgba(0,0,0,0.04), 0 1px 8px rgba(0,0,0,0.03);
    --shadow-md:    0 2px 8px rgba(0,0,0,0.05), 0 12px 32px rgba(0,0,0,0.06);
    --shadow-hover: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);

    /* Радиусы */
    --radius:    8px;
    --radius-sm: 6px;
    --radius-xs: 5px;

    /* Отступы */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 28px;

    /* Высоты контролов */
    --control-height-sm: 28px;
    --control-height-md: 32px;
    --control-height-lg: 40px;

    /* Motion tokens */
    --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-ease-soft: ease;
    --motion-fast: 0.12s;
    --motion-base: 0.2s;
    --motion-slow: 0.25s;
    --motion-slower: 0.6s;

    /* Навигация */
    --nav-bg:          #FFFFFF;
    --nav-active:      #2563EB;
    --nav-active-text: #FFFFFF;

    /* Таблицы */
    --table-header: #F4F4F6;
    --table-border: #E4E4E7;
    --badge-bg:     #F4F4F6;
}

/* ── Тёмная тема ──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --accent:            #5f94dc;
    --accent-hover:      #73a5ea;
    --accent-light:      rgba(95, 148, 220, 0.09);
    --accent-light-hover:rgba(95, 148, 220, 0.14);

    --bg:           #191919;
    --bg-card:      #202020;
    --bg-input:     #2C2C2C;
    --bg-input-hover:#353535;
    --bg-hover:     #353535;

    --border:        #333333;
    --border-strong: #434343;

    --text-primary:   #E0E0E0;
    --text-secondary: #9A9A9A;
    --text-muted:     #5A5A5A;
    --input-text:     #E0E0E0;

    --success:       #49bf78;
    --success-light: rgba(73, 191, 120, 0.09);
    --danger:        #dc7c7c;
    --danger-light:  rgba(220, 124, 124, 0.10);
    --warning:       #d3a255;
    --warning-light: rgba(211, 162, 85, 0.10);

    --shadow:       0 1px 2px rgba(0,0,0,0.30);
    --shadow-md:    0 2px 6px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.25);
    --shadow-hover: 0 4px 12px rgba(0,0,0,0.40);

    --nav-bg:          #202020;
    --nav-active:      #6EAAFF;
    --nav-active-text: #FFFFFF;

    --table-header: #252525;
    --table-border: #2E2E2E;
    --badge-bg:     #2C2C2C;
    color-scheme: dark;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Скроллбар ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }

/* Firefox / системный рендер скроллбаров */
html {
    scrollbar-color: var(--border-strong) transparent;
}

/* ── Утилиты ──────────────────────────────────────────────────────────────── */
.u-flex-row    { display: flex; }
.u-flex-col    { display: flex; flex-direction: column; }
.u-flex-wrap   { flex-wrap: wrap; }
.u-flex-between{ justify-content: space-between; }
.u-flex-center { justify-content: center; align-items: center; }
.u-gap-4  { gap: 4px; }
.u-gap-8  { gap: 8px; }
.u-gap-12 { gap: 12px; }
.u-mt-8   { margin-top: 8px; }
.u-mb-12  { margin-bottom: 12px; }
.u-w-100  { width: 100%; }
.u-text-center { text-align: center; }
.u-text-muted  { color: var(--text-muted); }
.u-inline-block{ display: inline-block; }

/* Мгновенное переключение темы: временно глушим все transition/animation */
html.theme-instant,
html.theme-instant *,
html.theme-instant *::before,
html.theme-instant *::after {
    transition: none !important;
    animation: none !important;
}

/* Ширины для чипов фильтров */
.chip-w-110 { width: 110px; }
.chip-w-120 { width: 120px; }
.chip-w-130 { width: 130px; }
.chip-w-140 { width: 140px; }
.chip-w-190 { width: 190px; }
.chip-w-220 { width: 220px; }

/* Ширины колонок таблиц */
.col-w-60  { width: 60px; }
.col-w-96  { width: 96px; }
.col-w-160 { min-width: 160px; }
.col-w-180 { width: 180px; }
.col-w-200 { width: 200px; }
.col-w-220 { width: 220px; }
.table-min-820  { min-width: 820px; }
.table-min-900  { min-width: 900px; }
.table-min-1100 { min-width: 1100px; }