/* Вожатская — дизайн-токены.
   Три уровня: примитивы, семантика, компоненты.
   Две темы-поверхности: маркетинговая (:root) и продуктовая (.vz-theme-app).
   Референсы: Apple HIG, Material 3, мессенджер ВКонтакте.
   Старые имена --vz-* сохранены как алиасы, чтобы существующие стили не ломались. */

/* ================= УРОВЕНЬ 1: ПРИМИТИВЫ ================= */
:root {
    color-scheme: light;

    /* Нейтральная холодная шкала */
    --vz-n-0:   #FFFFFF;
    --vz-n-25:  #FCFCFD;
    --vz-n-50:  #F7F8FA;
    --vz-n-100: #F1F3F5;
    --vz-n-200: #E6E9ED;
    --vz-n-300: #D5DAE1;
    --vz-n-400: #B4BCC7;
    --vz-n-500: #8A94A3;
    --vz-n-600: #667085;
    --vz-n-700: #475467;
    --vz-n-800: #2B3442;
    --vz-n-900: #1A2029;
    --vz-n-950: #0F1319;

    /* Брендовый оранжевый */
    --vz-brand-50:  #FFF5EC;
    --vz-brand-100: #FFE7D1;
    --vz-brand-200: #FFD0A8;
    --vz-brand-300: #FFB070;
    --vz-brand-400: #FF9A4D;
    --vz-brand-500: #FF8C32;
    --vz-brand-600: #F97316;
    --vz-brand-700: #EA580C;
    --vz-brand-800: #C2410C;
    --vz-brand-900: #9A3412;

    /* Семантические шкалы */
    --vz-green-50:  #ECFDF3; --vz-green-500:  #16A34A; --vz-green-700:  #15803D;
    --vz-red-50:    #FEF2F2; --vz-red-500:    #EF4444; --vz-red-700:    #B91C1C;
    --vz-amber-50:  #FFFBEB; --vz-amber-500:  #F59E0B; --vz-amber-700:  #B45309;
    --vz-blue-50:   #EFF6FF; --vz-blue-500:   #3B82F6; --vz-blue-700:   #1D4ED8;

    /* Мятный для аватаров-инициалов */
    --vz-mint-100: #D8F3EA; --vz-mint-500: #3DBE9B; --vz-mint-700: #1F7A63;

    /* Наследие старой схемы */
    --vz-orange-500: var(--vz-brand-500);
    --vz-orange-600: var(--vz-brand-600);
    --vz-orange-700: var(--vz-brand-700);
    --vz-navy-900: var(--vz-n-900);
    --vz-navy-800: var(--vz-n-800);
}

/* ========== УРОВЕНЬ 2: СЕМАНТИКА. Маркетинговая тема (:root) ========== */
:root {
    --vz-bg: var(--vz-n-0);
    --vz-bg-soft: var(--vz-n-50);
    --vz-surface: var(--vz-n-0);
    --vz-surface-2: var(--vz-n-50);
    --vz-surface-3: var(--vz-n-100);
    --vz-surface-raised: var(--vz-n-0);
    --vz-surface-sunken: var(--vz-n-100);
    --vz-surface-hover: var(--vz-n-100);
    --vz-surface-active: var(--vz-n-200);
    --vz-surface-inverse: var(--vz-n-900);

    --vz-border: #E2E8F0;
    --vz-line: var(--vz-border);
    --vz-line-soft: rgba(30, 41, 59, .07);
    --vz-line-strong: #CBD5E1;
    --vz-border-strong: var(--vz-line-strong);
    --vz-border-subtle: var(--vz-n-100);
    --vz-divider: rgba(26, 32, 41, .06);

    --vz-text: var(--vz-n-900);
    --vz-text-2: var(--vz-n-700);
    --vz-muted: var(--vz-n-600);
    --vz-text-light: var(--vz-n-400);
    --vz-text-secondary: var(--vz-n-700);
    --vz-text-tertiary: var(--vz-n-600);
    --vz-text-disabled: var(--vz-n-400);
    --vz-text-inverse: var(--vz-n-0);
    --vz-text-link: var(--vz-brand-800);

    --vz-primary: var(--vz-brand-500);
    --vz-primary-strong: var(--vz-brand-600);
    --vz-primary-deep: var(--vz-brand-800);
    --vz-on-primary: var(--vz-n-0);
    --vz-primary-soft: var(--vz-brand-50);
    --vz-primary-ring: rgba(255, 140, 50, .18);

    --vz-accent: var(--vz-brand-600);
    --vz-accent-hover: var(--vz-brand-700);
    --vz-accent-active: var(--vz-brand-800);
    --vz-accent-soft: var(--vz-brand-50);
    --vz-accent-text: var(--vz-brand-800);
    --vz-on-accent: var(--vz-n-0);
    --vz-focus-ring: rgba(249, 115, 22, .35);

    --vz-success: var(--vz-green-500); --vz-success-soft: var(--vz-green-50); --vz-success-text: var(--vz-green-700);
    --vz-warning: var(--vz-amber-500); --vz-warning-soft: var(--vz-amber-50); --vz-warning-text: var(--vz-amber-700);
    --vz-danger: var(--vz-red-500);    --vz-danger-soft:  var(--vz-red-50);   --vz-danger-text:  var(--vz-red-700);
    --vz-info: var(--vz-blue-500);     --vz-info-soft:    var(--vz-blue-50);  --vz-info-text:    var(--vz-blue-700);
    --vz-online: var(--vz-green-500);

    --vz-shadow-1: 0 8px 32px rgba(30, 41, 59, .08);
    --vz-shadow-2: 0 12px 40px rgba(30, 41, 59, .10);
    --vz-shadow-3: 0 24px 64px rgba(30, 41, 59, .12);
    --vz-shadow-glow: 0 24px 64px rgba(255, 140, 50, .22);
    --vz-shadow-orange: 0 10px 28px rgba(255, 140, 50, .42);
    --vz-shadow-orange-sm: 0 8px 24px rgba(255, 107, 44, .38);
    --vz-shadow-xs: var(--vz-shadow-1);
    --vz-shadow-sm: var(--vz-shadow-1);
    --vz-shadow-md: var(--vz-shadow-2);
    --vz-shadow-lg: var(--vz-shadow-3);
    --vz-shadow-pop: 0 16px 48px rgba(16, 24, 40, .16);

    --vz-radius-xs: 10px;
    --vz-radius-sm: 12px;
    --vz-radius: 16px;
    --vz-radius-lg: 24px;
    --vz-radius-xl: 32px;
    --vz-radius-pill: 999px;
    --vz-r-xs: var(--vz-radius-xs);
    --vz-r-sm: var(--vz-radius-sm);
    --vz-r-md: var(--vz-radius);
    --vz-r-lg: var(--vz-radius-lg);
    --vz-r-xl: var(--vz-radius-xl);
    --vz-r-full: var(--vz-radius-pill);

    --vz-space-1: 4px;  --vz-space-2: 8px;  --vz-space-3: 12px; --vz-space-4: 16px;
    --vz-space-5: 24px; --vz-space-6: 32px; --vz-space-7: 48px; --vz-space-8: 64px;
    --vz-sp-1: var(--vz-space-1);  --vz-sp-2: var(--vz-space-2);  --vz-sp-3: var(--vz-space-3);
    --vz-sp-4: var(--vz-space-4);  --vz-sp-5: 20px;               --vz-sp-6: var(--vz-space-5);
    --vz-sp-8: var(--vz-space-6);  --vz-sp-10: 40px;              --vz-sp-12: var(--vz-space-7);
    --vz-sp-16: var(--vz-space-8);

    --vz-ease: cubic-bezier(.4, 0, .2, 1);
    --vz-ease-out: cubic-bezier(.2, .7, .2, 1);
    --vz-ease-spring: cubic-bezier(.34, 1.3, .64, 1);
    --vz-dur-fast: .15s;
    --vz-dur: .25s;
    --vz-dur-slow: .4s;
    --vz-dur-1: .12s;
    --vz-dur-2: .2s;
    --vz-dur-3: .32s;

    --vz-z-nav: 100; --vz-z-sticky: 200; --vz-z-pop: 500;
    --vz-z-drawer: 800; --vz-z-modal: 900; --vz-z-toast: 1000;

    --vz-blur: saturate(180%) blur(20px);
    --vz-surface-blur: rgba(255, 255, 255, .82);

    --vz-container: 1200px;
    --vz-container-narrow: 1120px;
    --vz-header-h: 72px;

    --vz-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --vz-font-heading: var(--vz-font);
    --vz-font-hand: 'Caveat', 'Montserrat', cursive;
    --vz-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --vz-fs-xs: .78rem;
    --vz-fs-sm: .88rem;
    --vz-fs-base: 1rem;
    --vz-fs-lg: 1.125rem;
    --vz-fs-xl: 1.375rem;
    --vz-fs-2xl: 1.75rem;
    --vz-fs-3xl: clamp(2.2rem, 5vw, 3.5rem);
    --vz-lh: 1.55;
    --vz-lh-tight: 1.12;

    /* УРОВЕНЬ 3: компоненты */
    --vz-nav-w: 248px;
    --vz-topbar-h: 56px;
    --vz-panel-w: 320px;
    --vz-list-w: 340px;
    --vz-row-h: 68px;
    --vz-bubble-max-w: 62%;
    --vz-bubble-r: 16px;
    --vz-composer-h: 52px;
    --vz-ctrl-h-sm: 32px; --vz-ctrl-h: 38px; --vz-ctrl-h-lg: 46px;
    --vz-ctrl-pad: 0 14px;
    --vz-ava-xs: 24px; --vz-ava-sm: 32px; --vz-ava-md: 40px; --vz-ava-lg: 56px; --vz-ava-xl: 88px;

    /* Медиа-холст: всегда тёмный независимо от темы */
    --vz-media-bg: #0F172A;
    --vz-media-canvas: #000000;
}

/* ========== УРОВЕНЬ 2: СЕМАНТИКА. Продуктовая тема (.vz-theme-app) ========== */
/* Плотная, плоская, серый фон страницы, белые карточки. Кабинет, мессенджер,
   школа, биржа, авторизация. Класс ставится на body макета. */
.vz-theme-app {
    --vz-bg: var(--vz-n-50);
    --vz-bg-soft: var(--vz-n-100);
    --vz-surface: var(--vz-n-0);
    --vz-surface-2: var(--vz-n-50);
    --vz-surface-3: var(--vz-n-100);
    --vz-surface-raised: var(--vz-n-0);
    --vz-surface-sunken: var(--vz-n-100);
    --vz-surface-hover: var(--vz-n-100);
    --vz-surface-active: var(--vz-n-200);
    --vz-surface-inverse: var(--vz-n-900);

    --vz-border: var(--vz-n-200);
    --vz-line: var(--vz-n-200);
    --vz-line-soft: var(--vz-n-100);
    --vz-line-strong: var(--vz-n-300);
    --vz-border-strong: var(--vz-n-300);
    --vz-border-subtle: var(--vz-n-100);
    --vz-divider: rgba(26, 32, 41, .06);

    --vz-text: var(--vz-n-900);
    --vz-text-2: var(--vz-n-700);
    --vz-muted: var(--vz-n-600);
    --vz-text-light: var(--vz-n-400);
    --vz-text-secondary: var(--vz-n-700);
    --vz-text-tertiary: var(--vz-n-600);
    --vz-text-disabled: var(--vz-n-400);
    --vz-text-inverse: var(--vz-n-0);
    --vz-text-link: var(--vz-brand-800);

    --vz-primary: var(--vz-brand-800);
    --vz-primary-strong: var(--vz-brand-900);
    --vz-primary-deep: var(--vz-brand-800);
    --vz-on-primary: var(--vz-n-0);
    --vz-primary-soft: var(--vz-brand-50);
    --vz-primary-ring: rgba(234, 88, 12, .22);

    --vz-accent: var(--vz-brand-800);
    --vz-accent-hover: var(--vz-brand-900);
    --vz-accent-active: var(--vz-brand-900);
    --vz-accent-soft: var(--vz-brand-50);
    --vz-accent-text: var(--vz-brand-800);
    --vz-on-accent: var(--vz-n-0);
    --vz-focus-ring: rgba(234, 88, 12, .35);

    --vz-shadow-1: 0 1px 2px rgba(16, 24, 40, .04);
    --vz-shadow-2: 0 1px 3px rgba(16, 24, 40, .07);
    --vz-shadow-3: 0 8px 24px rgba(16, 24, 40, .10);
    --vz-shadow-glow: 0 1px 2px rgba(16, 24, 40, .04);
    --vz-shadow-orange: 0 1px 2px rgba(16, 24, 40, .06);
    --vz-shadow-orange-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --vz-shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
    --vz-shadow-sm: 0 1px 3px rgba(16, 24, 40, .07);
    --vz-shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
    --vz-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
    --vz-shadow-pop: 0 16px 48px rgba(16, 24, 40, .16);

    --vz-radius-xs: 6px;
    --vz-radius-sm: 8px;
    --vz-radius: 10px;
    --vz-radius-lg: 12px;
    --vz-radius-xl: 16px;
    --vz-radius-pill: 999px;
    --vz-r-xs: 6px;
    --vz-r-sm: 8px;
    --vz-r-md: 10px;
    --vz-r-lg: 12px;
    --vz-r-xl: 16px;
    --vz-r-full: 999px;

    --vz-container: 1440px;
    --vz-header-h: 56px;

    --vz-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --vz-font-heading: var(--vz-font);
    --vz-font-hand: 'Caveat', var(--vz-font);
    --vz-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --vz-fs-xs: 11px;
    --vz-fs-sm: 13px;
    --vz-fs-base: 14px;
    --vz-fs-lg: 15px;
    --vz-fs-xl: 17px;
    --vz-fs-2xl: 20px;
    --vz-fs-3xl: 24px;
    --vz-lh: 1.45;
    --vz-lh-tight: 1.3;

    color-scheme: light;
}

/* Явное включение маркетинговой темы (по умолчанию она же в :root). */
.vz-theme-marketing {
}

/* ========== ТЁМНАЯ ТЕМА (только для продуктового интерфейса) ========== */
/* Включается явно классом .vz-theme-dark, а не системной темой, чтобы
   кабинет и другие сервисы всегда оставались светлыми. */
.vz-theme-app.vz-theme-dark {
    color-scheme: dark;
        --vz-bg: var(--vz-n-950);
        --vz-bg-soft: var(--vz-n-900);
        --vz-surface: var(--vz-n-900);
        --vz-surface-2: var(--vz-n-900);
        --vz-surface-3: var(--vz-n-800);
        --vz-surface-raised: var(--vz-n-800);
        --vz-surface-sunken: var(--vz-n-950);
        --vz-surface-hover: var(--vz-n-800);
        --vz-surface-active: var(--vz-n-700);
        --vz-surface-inverse: var(--vz-n-0);

        --vz-border: var(--vz-n-800);
        --vz-line: var(--vz-n-800);
        --vz-line-soft: var(--vz-n-800);
        --vz-line-strong: var(--vz-n-700);
        --vz-border-strong: var(--vz-n-700);
        --vz-border-subtle: var(--vz-n-800);
        --vz-divider: rgba(255, 255, 255, .08);

        --vz-text: var(--vz-n-50);
        --vz-text-2: var(--vz-n-300);
        --vz-muted: var(--vz-n-400);
        --vz-text-light: var(--vz-n-500);
        --vz-text-secondary: var(--vz-n-300);
        --vz-text-tertiary: var(--vz-n-400);
        --vz-text-disabled: var(--vz-n-600);
        --vz-text-inverse: var(--vz-n-950);
        --vz-text-link: var(--vz-brand-300);

        --vz-primary: var(--vz-brand-600);
        --vz-primary-strong: var(--vz-brand-500);
        --vz-primary-deep: var(--vz-brand-300);
        --vz-primary-soft: rgba(255, 140, 50, .16);
        --vz-primary-ring: rgba(249, 115, 22, .45);
        --vz-accent: var(--vz-brand-500);
        --vz-accent-hover: var(--vz-brand-600);
        --vz-accent-active: var(--vz-brand-700);
        --vz-accent-soft: rgba(255, 140, 50, .16);
        --vz-accent-text: var(--vz-brand-300);
        --vz-focus-ring: rgba(249, 115, 22, .45);

        --vz-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
        --vz-shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
        --vz-shadow-md: 0 4px 12px rgba(0, 0, 0, .5);
        --vz-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
        --vz-shadow-pop: 0 16px 48px rgba(0, 0, 0, .6);
        --vz-shadow-1: var(--vz-shadow-sm);
        --vz-shadow-2: var(--vz-shadow-md);
        --vz-shadow-3: var(--vz-shadow-lg);

    --vz-surface-blur: rgba(15, 19, 25, .78);
}

/* ========== ИНТЕГРАЦИЯ С КАСТОМАЙЗЕРОМ RIMMA (--rimma-*) ========== */
:root {
    --vz-primary: var(--rimma-primary, var(--vz-brand-500));
    --vz-radius: var(--rimma-radius, 16px);
    --vz-container: var(--rimma-container, 1200px);
    --vz-font: var(--rimma-font-body, 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
    --vz-font-heading: var(--rimma-font-heading, var(--vz-font));
}

/* ========== ДОСТУПНОСТЬ: сокращённое движение ========== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}