/* ============================================================
   DESIGN TOKENS — Nexa Admin (Redesign 2026)
   Подход: тёплая нейтральная база + насыщенный индиго-акцент
   и более выразительные, но всё ещё не неоновые семантические
   цвета. Категорийные акценты — для разнообразия.
   ============================================================ */
:root {
    /* Поверхности (GA4-cool: белый контент + прохладный серый рейл) */
    --bg-page:        #ffffff;
    --bg-card:        #ffffff;
    --bg-subtle:      #f8f9fa;
    --bg-hover:       #f1f3f4;
    --bg-pressed:     #e8eaed;

    /* Бордеры (прохладный серый) */
    --border:         #e8eaed;
    --border-strong:  #dadce0;
    --border-subtle:  #f1f3f4;

    /* Текст (прохладный серый) */
    --text-1:         #202124;
    --text-2:         #5f6368;
    --text-3:         #80868b;
    --text-4:         #9aa0a6;

    /* Акцент — indigo (насыщенный, но мудрый) */
    --accent-1:       #4338ca;
    --accent-2:       #6366f1;
    --accent-3:       #a5b4fc;
    --accent-soft:    #eef2ff;
    --accent-tint:    #f5f7ff;

    /* Семантика (более выразительные, но не неон) */
    --success-bg:     #ecfdf5;
    --success-text:   #047857;
    --success-border: #a7f3d0;

    --warning-bg:     #fffbeb;
    --warning-text:   #b45309;
    --warning-border: #fcd34d;

    --danger-bg:      #fef2f2;
    --danger-text:    #b91c1c;
    --danger-border:  #fca5a5;

    --info-bg:        #eff6ff;
    --info-text:      #1d4ed8;
    --info-border:    #bfdbfe;

    /* Категорийные акценты (для разнообразия в карточках, тегах, разделах) */
    --cat-emerald-bg:    #ecfdf5;
    --cat-emerald-text:  #047857;
    --cat-emerald-border:#6ee7b7;

    --cat-violet-bg:     #f5f3ff;
    --cat-violet-text:   #6d28d9;
    --cat-violet-border: #c4b5fd;

    --cat-amber-bg:      #fffbeb;
    --cat-amber-text:    #b45309;
    --cat-amber-border:  #fcd34d;

    --cat-rose-bg:       #fff1f2;
    --cat-rose-text:     #be123c;
    --cat-rose-border:   #fda4af;

    --cat-teal-bg:       #f0fdfa;
    --cat-teal-text:     #0f766e;
    --cat-teal-border:   #5eead4;

    --cat-sky-bg:        #f0f9ff;
    --cat-sky-text:      #0369a1;
    --cat-sky-border:    #7dd3fc;

    /* Радиусы */
    --r-xs:    4px;
    --r-sm:    6px;
    --r-md:    10px;
    --r-lg:    14px;
    --r-xl:    18px;
    --r-pill:  999px;

    /* Тени */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);

    /* Фокус-кольцо (индиго) */
    --ring: 0 0 0 3px rgba(99, 102, 241, 0.20);

    /* Переходы */
    --t-fast:   120ms ease;
    --t-base:   180ms ease;
    --t-slow:   240ms ease;
}

/* Сброс базовых стилей */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg-page);
    color: var(--text-1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    letter-spacing: -0.005em;
}

/* Числа в таблицах — табличные пропорции (одинаковая ширина цифр) */
table, .num, .cell-value, .cell-delta {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* Уменьшение масштаба всей админки до 85% */
body {
    zoom: 0.85;
}

/* Базовый фокус для всех интерактивных элементов */
:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* Переключатель языка (общий для всех страниц) */
.language-switcher {
    display: inline-flex;
    background-color: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 3px;
    gap: 2px;
}

.lang-btn {
    min-width: 44px;
    height: 30px;
    padding: 0 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-3);
    background: transparent;
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background-color var(--t-base), color var(--t-base);
}

.lang-btn:hover {
    color: var(--text-1);
}

.lang-btn.active {
    background-color: var(--bg-card);
    color: var(--text-1);
    box-shadow: var(--shadow-xs);
}