/* ============================================================================
   ТОКЕНЫ ДИЗАЙНА — Мактаб-интернат №1
   ----------------------------------------------------------------------------
   Единственное место, где задаются цвета, отступы, радиусы, тени и z-index.
   Цвет бренда (--brand) приходит из настроек owner-панели через inline-<style>
   в base.html, поэтому смена «Внешнего вида» реально меняет интерфейс.
   ========================================================================== */

:root {
    /* ── Бренд (переопределяется из настроек) ─────────────────────────────── */
    --brand: #14b8a6;
    --brand-dark: #0d9488;
    --brand-dark-2: #0f766e;
    --brand-light: #5eead4;
    --brand-rgb: 20, 184, 166;

    /* ── Поверхности ──────────────────────────────────────────────────────── */
    --bg: #f6f8fa;
    --bg-alt: #eef2f6;
    --bg-input: #ffffff;
    --surface: #ffffff;
    --surface-hover: #f8fafc;
    --surface-2: #f1f5f9;

    /* Рельса навигации */
    --rail-bg: #0c2b27;
    --rail-bg-2: #103a34;
    --rail-fg: #d8efeb;
    --rail-fg-dim: #8fb8b1;
    --rail-hover: rgba(255, 255, 255, .07);
    --rail-active: rgba(var(--brand-rgb), .20);
    --rail-width: 264px;
    --rail-width-collapsed: 76px;

    /* ── Текст ────────────────────────────────────────────────────────────── */
    /* #5b6b80 подобран так, чтобы проходить WCAG AA (≥4.5:1) не только на
       белой карточке, но и на серо-голубом фоне --bg-alt. */
    --text: #0f172a;
    --text-strong: #020617;
    --text-muted: #5b6b80;
    --text-placeholder: #94a3b8;

    /* ── Границы ──────────────────────────────────────────────────────────── */
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --border-input: #cbd5e1;
    --border-input-hover: #94a3b8;

    /* ── Статусы ──────────────────────────────────────────────────────────── */
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --warning: #d97706;
    --warning-soft: #fffbeb;
    --success: #059669;
    --success-soft: #ecfdf5;
    --info: #2563eb;
    --info-soft: #eff6ff;

    /* ── Шкала отступов (шаг 4px) ─────────────────────────────────────────── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;

    /* ── Шкала типографики ────────────────────────────────────────────────── */
    --text-xs: 11.5px;
    --text-sm: 12.5px;
    --text-base: 13.5px;
    --text-md: 15px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-kpi: 30px;
    --lh-tight: 1.2;
    --lh-normal: 1.55;

    /* ── Радиусы ──────────────────────────────────────────────────────────── */
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    /* ── Тени (одна на уровень) ───────────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 4px 14px rgba(15, 23, 42, .08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);
    --shadow-brand: 0 4px 14px rgba(var(--brand-rgb), .28);

    /* ── Слои ─────────────────────────────────────────────────────────────── */
    --z-rail: 900;
    --z-topbar: 800;
    --z-overlay: 1000;
    --z-toast: 1200;

    /* ── Каркас ───────────────────────────────────────────────────────────── */
    --topbar-h: 60px;
    --navbar-h: var(--topbar-h);
    --content-max: 1240px;

    /* ── Анимации ─────────────────────────────────────────────────────────── */
    --t-fast: .14s ease;
    --t-base: .2s cubic-bezier(.4, 0, .2, 1);
}

/* ══════════════════════════ ТЁМНАЯ ТЕМА ══════════════════════════════════ */
html[data-theme="dark"] {
    --bg: #071a18;
    --bg-alt: #05130f;
    --bg-input: #10302b;
    --surface: #0e2a26;
    --surface-hover: #123530;
    --surface-2: #0a201d;

    --rail-bg: #04120f;
    --rail-bg-2: #07211d;
    --rail-fg: #d8efeb;
    --rail-fg-dim: #7fa8a1;
    --rail-hover: rgba(255, 255, 255, .06);

    --text: #e8f5f2;
    --text-strong: #ffffff;
    --text-muted: #93b3ad;
    --text-placeholder: #6d8b86;

    --border: #17423a;
    --border-strong: #21564c;
    --border-input: #21564c;
    --border-input-hover: #2f6f63;

    --danger-soft: rgba(220, 38, 38, .14);
    --warning-soft: rgba(217, 119, 6, .14);
    --success-soft: rgba(5, 150, 105, .14);
    --info-soft: rgba(37, 99, 235, .14);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6);

    color-scheme: dark;
}