/* === CSS/VARIABLES.CSS - ЕДИНСТВЕННЫЙ ИСТОЧНИК ВСЕХ ПЕРЕМЕННЫХ === */
/* ✅ МОДУЛЬНАЯ ЦВЕТОВАЯ СИСТЕМА "ДОВЕРИЕ + ЧИСТОТА" */
/* ✅ ЕДИНСТВЕННОЕ МЕСТО ДЛЯ @media (prefers-color-scheme: dark) */
/* ✅ ЦЕНТРАЛИЗОВАННОЕ УПРАВЛЕНИЕ ТЕМАМИ */
/* ✅ ПОЛНАЯ ПОДДЕРЖКА CHAT-DEMO И ВСЕХ БЛОКОВ */

:root {
    /* === 🔵 ОСНОВНОЙ СИНИЙ - 70% ЭЛЕМЕНТОВ === */
    --brand-blue-50: #f0f9ff;
    --brand-blue-100: #e0f2fe;
    --brand-blue-200: #bae6fd;
    --brand-blue-300: #7dd3fc;
    --brand-blue-400: #38bdf8;           /* Светлый синий */
    --brand-blue-500: #0ea5e9;           /* ⭐ ОСНОВНОЙ синий ДентаКлиник */
    --brand-blue-600: #0284c7;           /* Темный синий */
    --brand-blue-700: #0369a1;           /* Очень темный синий */
    --brand-blue-800: #075985;
    --brand-blue-900: #0c4a6e;

    /* === ⚫ АКЦЕНТ ТЕМНО-СИНИЙ - 25% ЭЛЕМЕНТОВ === */
    --brand-accent-50: #f8fafc;
    --brand-accent-100: #f1f5f9;
    --brand-accent-200: #e2e8f0;
    --brand-accent-300: #cbd5e1;
    --brand-accent-400: #94a3b8;
    --brand-accent-500: #64748b;
    --brand-accent-600: #475569;          /* Вторичный темный */
    --brand-accent-700: #334155;
    --brand-accent-800: #1e293b;          /* Средний темный */
    --brand-accent-900: #0f172a;          /* ⭐ ОСНОВНОЙ темный */

    /* === 🟢 SUCCESS МЯТНЫЙ - 5% ЭЛЕМЕНТОВ === */
    --brand-success-50: #f0fdf4;
    --brand-success-100: #dcfce7;
    --brand-success-200: #bbf7d0;
    --brand-success-300: #86efac;
    --brand-success-400: #4ade80;
    --brand-success-500: #22c55e;
    --brand-success-600: #16a34a;
    --brand-success-700: #15803d;
    --brand-mint-main: #06d6a0;           /* ⭐ ОСНОВНОЙ мятный ДентаКлиник */
    --brand-mint-light: #34d399;          /* Светлый мятный */
    --brand-mint-rgb: 6, 214, 160;        /* RGB для rgba() */

    /* === 🟠 АКЦЕНТ ОРАНЖЕВЫЙ - ТОЛЬКО CTA === */
    --brand-orange-main: #f97316;         /* ⭐ ОСНОВНОЙ оранжевый для кнопок */
    --brand-orange-light: #fb923c;
    --brand-orange-dark: #ea580c;

    /* === 🔴 СИСТЕМНЫЕ ЦВЕТА - ТОЛЬКО ОШИБКИ/ПРЕДУПРЕЖДЕНИЯ === */
    --system-warning-50: #fffbeb;
    --system-warning-500: #f59e0b;
    --system-warning-700: #a16207;
    --system-error-50: #fef2f2;
    --system-error-500: #ef4444;
    --system-error-700: #b91c1c;

    /* === 🎨 СЕМАНТИЧЕСКИЕ ПЕРЕМЕННЫЕ ДЛЯ СВЕТЛОЙ ТЕМЫ === */
    
    /* Основные цвета */
    --color-primary: var(--brand-blue-500);            /* Основной синий */
    --color-primary-hover: var(--brand-blue-600);      /* Синий при hover */
    --color-primary-light: var(--brand-blue-400);      /* Светлый синий */
    --color-accent: var(--brand-accent-900);           /* Основной темный */
    --color-accent-medium: var(--brand-accent-800);    /* Средний темный */
    --color-success: var(--brand-mint-main);           /* Мятный успех */
    --color-success-light: var(--brand-mint-light);    /* Светлый мятный */
    --color-orange: var(--brand-orange-main);          /* Оранжевые CTA */

    /* Фоны */
    --bg-primary: #ffffff;                             /* Основной белый фон */
    --bg-secondary: var(--brand-accent-50);            /* Вторичный фон */
    --bg-tertiary: var(--brand-accent-100);            /* Третичный фон */
    --bg-overlay: rgba(255, 255, 255, 0.95);          /* Overlay фон */
    --bg-blur: rgba(255, 255, 255, 0.85);             /* Blur фон */

    /* Тексты */
    --text-primary: var(--brand-accent-900);           /* Основной текст */
    --text-secondary: var(--brand-accent-600);         /* Вторичный текст */
    --text-muted: var(--brand-accent-500);             /* Приглушенный текст */
    --text-inverse: #ffffff;                           /* Обратный текст */
    --text-accent: var(--color-primary);               /* Акцентный текст */

    /* Границы и разделители */
    --border-primary: var(--brand-accent-200);         /* Основные границы */
    --border-secondary: var(--brand-accent-100);       /* Светлые границы */
    --border-accent: var(--color-primary);             /* Акцентные границы */
    --border-focus: var(--color-primary);              /* Границы фокуса */

    /* Состояния интерактивности */
    --state-hover: rgba(14, 165, 233, 0.1);           /* Hover состояние */
    --state-focus: rgba(14, 165, 233, 0.15);          /* Focus состояние */
    --state-active: rgba(14, 165, 233, 0.2);          /* Active состояние */
    --state-success: rgba(6, 214, 160, 0.1);          /* Success фон */
    --state-warning: rgba(245, 158, 11, 0.1);         /* Warning фон */
    --state-error: rgba(239, 68, 68, 0.1);            /* Error фон */

    /* === 📐 ТИПОГРАФИКА === */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Courier New', monospace;

    /* Размеры шрифтов */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */

    /* Высота строк */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* === 📏 ОТСТУПЫ И РАЗМЕРЫ === */
    --spacing-0: 0;
    --spacing-1: 0.25rem;    /* 4px */
    --spacing-2: 0.5rem;     /* 8px */
    --spacing-3: 0.75rem;    /* 12px */
    --spacing-4: 1rem;       /* 16px */
    --spacing-5: 1.25rem;    /* 20px */
    --spacing-6: 1.5rem;     /* 24px */
    --spacing-8: 2rem;       /* 32px */
    --spacing-10: 2.5rem;    /* 40px */
    --spacing-12: 3rem;      /* 48px */
    --spacing-16: 4rem;      /* 64px */
    --spacing-20: 5rem;      /* 80px */
    --spacing-24: 6rem;      /* 96px */
    --spacing-32: 8rem;      /* 128px */

    /* Семантические отступы */
    --spacing-xs: var(--spacing-2);
    --spacing-sm: var(--spacing-3);
    --spacing-md: var(--spacing-6);
    --spacing-lg: var(--spacing-8);
    --spacing-xl: var(--spacing-16);
    --spacing-xxl: var(--spacing-24);

    /* === 📱 КОНТЕЙНЕРЫ И БРЕЙКПОИНТЫ === */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    --container-max: 1400px;              /* Максимальный контейнер */

    /* === 🔘 РАДИУСЫ СКРУГЛЕНИЯ === */
    --radius-none: 0;
    --radius-sm: 0.125rem;    /* 2px */
    --radius-md: 0.375rem;    /* 6px */
    --radius-lg: 0.5rem;      /* 8px */
    --radius-xl: 0.75rem;     /* 12px */
    --radius-2xl: 1rem;       /* 16px */
    --radius-3xl: 1.5rem;     /* 24px */
    --radius-full: 9999px;

    /* === 🌑 ТЕНИ === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Специальные тени */
    --shadow-glow-blue: 0 0 20px rgba(14, 165, 233, 0.3);
    --shadow-glow-mint: 0 0 20px rgba(6, 214, 160, 0.3);
    --shadow-glow-orange: 0 0 20px rgba(249, 115, 22, 0.3);

    /* === ⚡ ПЕРЕХОДЫ И АНИМАЦИИ === */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    --transition-slowest: 500ms ease-in-out;

    --duration-fast: 0.15s;
    --duration-normal: 0.3s;
    --duration-slow: 0.6s;
    --duration-slowest: 1s;

    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-enter: cubic-bezier(0, 0, 0.2, 1);
    --easing-exit: cubic-bezier(0.4, 0, 1, 1);
    --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* === 📚 Z-INDEX СЛОИ === */
    --z-auto: auto;
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-notification: 1080;

    /* === 🎨 ГРАДИЕНТЫ === */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-success));
    --gradient-accent: linear-gradient(135deg, var(--color-orange), var(--brand-orange-dark));
    --gradient-hero: linear-gradient(135deg, var(--bg-secondary) 0%, var(--brand-blue-50) 100%);
    --gradient-success: linear-gradient(135deg, var(--color-success), var(--color-success-light));
    --gradient-clean: linear-gradient(135deg, var(--brand-blue-50), var(--bg-secondary));
    
    /* Hero специальные градиенты */
    --gradient-hero-title: linear-gradient(135deg, var(--text-primary), var(--color-primary));
    --gradient-doctor-avatar: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));

    /* === 🧩 КОМПОНЕНТНЫЕ ПЕРЕМЕННЫЕ === */
    
    /* Кнопки */
    --btn-height-sm: 32px;
    --btn-height-md: 40px;
    --btn-height-lg: 48px;
    --btn-padding-sm: var(--spacing-2) var(--spacing-3);
    --btn-padding-md: var(--spacing-3) var(--spacing-6);
    --btn-padding-lg: var(--spacing-4) var(--spacing-8);
    --btn-radius: var(--radius-lg);
    --btn-transition: all var(--transition-base);
    
    /* ✅ ИСПРАВЛЕНЫ: кнопочные переменные для синей системы */
    --btn-bg-primary: var(--gradient-primary);
    --btn-bg-primary-hover: var(--color-primary-hover);
    --btn-text-primary: var(--text-inverse);
    --btn-border-primary: var(--color-primary);
    
    /* Hero специальные переменные */
    --hero-min-height: 100vh;
    --hero-padding-top: calc(var(--header-height) + var(--spacing-20));
    --hero-padding-mobile: calc(var(--header-height-mobile) + var(--spacing-8));
    --hero-features-gap: var(--spacing-4);
    --hero-doctors-gap: var(--spacing-6);
    --hero-contacts-gap: var(--spacing-6);

    /* Карточки */
    --card-padding: var(--spacing-6);
    --card-radius: var(--radius-xl);
    --card-border: 1px solid var(--border-primary);
    --card-shadow: var(--shadow-md);
    --card-shadow-hover: var(--shadow-xl);
    --card-hover-lift: -8px;
    
    /* ✅ ДОБАВЛЕНЫ: карточные переменные для семантики */
    --card-bg: var(--bg-overlay);
    --card-border-color: var(--border-primary);

    /* Формы */
    --form-input-height: 48px;
    --form-input-padding: var(--spacing-3) var(--spacing-4);
    --form-border-width: 2px;
    --form-radius: var(--radius-lg);
    
    /* ✅ ДОБАВЛЕНЫ: формовые переменные для семантики */
    --input-bg: var(--bg-primary);
    --input-border: var(--border-primary);
    --input-border-focus: var(--border-accent);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-muted);

    /* Header */
    --header-height: 80px;
    --header-height-mobile: 70px;
    --header-height-mobile-sm: 60px;

    /* Блоки */
    --block-padding: var(--spacing-xxl) var(--spacing-lg);
    --block-padding-mobile: var(--spacing-lg) var(--spacing-md);
    --section-min-height: 400px;

    /* Разделители */
    --divider-width: 1px;
    --divider-color: var(--border-primary);

    /* Прогресс бары */
    --progress-height: 8px;
    --progress-radius: var(--radius-full);

    /* ✅ ДОБАВЛЕНЫ: СПЕЦИАЛЬНЫЕ ПЕРЕМЕННЫЕ ДЛЯ CHAT-DEMO === */
    
    /* Chat Demo контейнеры */
    --chat-demo-bg: var(--bg-overlay);
    --chat-demo-border: var(--border-primary);
    --chat-demo-shadow: var(--shadow-2xl);
    --chat-demo-radius: var(--radius-2xl);
    --chat-demo-padding: var(--spacing-8);
    
    /* Chat элементы */
    --chat-header-border: var(--border-primary);
    --chat-message-bg: var(--state-hover);
    --chat-message-border: var(--border-accent);
    --chat-message-text: var(--text-secondary);
    
    /* Quick replies */
    --quick-reply-bg: var(--bg-primary);
    --quick-reply-border: var(--border-accent);
    --quick-reply-text: var(--color-primary);
    --quick-reply-hover-bg: var(--color-primary);
    --quick-reply-hover-text: var(--text-inverse);
    
    /* Chat features */
    --chat-features-bg: var(--state-hover);
    --chat-features-border: var(--border-accent);
    --chat-feature-icon: var(--color-success);
    
    /* Chat статистика */
    --chat-stat-bg: var(--bg-blur);
    --chat-stat-border: var(--border-primary);
    --chat-stat-number: var(--color-orange);
    --chat-stat-label: var(--text-secondary);
    
    /* AI Avatar */
    --ai-avatar-bg: var(--gradient-primary);
    --ai-avatar-text: var(--text-inverse);
    --ai-avatar-shadow: var(--shadow-lg);
    --ai-avatar-status: var(--color-success);
    
    /* Chat индикаторы */
    --chat-status-bg: var(--state-success);
    --chat-status-border: var(--color-success);
    --chat-status-text: var(--color-success);
    --chat-status-dot: var(--color-success);

    /* ✅ УВЕДОМЛЕНИЯ */
    --notification-success-bg: var(--state-success);
    --notification-success-border: var(--color-success);
    --notification-success-text: var(--color-success);
    --notification-warning-bg: var(--state-warning);
    --notification-warning-border: var(--system-warning-500);
    --notification-warning-text: var(--system-warning-700);
    --notification-error-bg: var(--state-error);
    --notification-error-border: var(--system-error-500);
    --notification-error-text: var(--system-error-700);

    /* ✅ МОДАЛЬНЫЕ ОКНА */
    --modal-bg: var(--bg-overlay);
    --modal-backdrop: rgba(0, 0, 0, 0.6);
    --modal-border: var(--border-primary);
    --modal-shadow: var(--shadow-2xl);
    --modal-radius: var(--radius-xl);

    /* === 🎯 RGB ВЕРСИИ ДЛЯ rgba() === */
    --brand-blue-500-rgb: 14, 165, 233;
    --brand-blue-600-rgb: 2, 132, 199;
    --brand-blue-900-rgb: 12, 74, 110;
    --brand-accent-900-rgb: 15, 23, 42;
    --brand-accent-800-rgb: 30, 41, 59;
    --brand-orange-main-rgb: 249, 115, 22;
    --brand-mint-rgb: 6, 214, 160;

    /* === 🔄 СОВМЕСТИМОСТЬ СО СТАРОЙ СИСТЕМОЙ === */
    /* ✅ Для плавного перехода - будет удалено позже */
    --primary-500: var(--color-primary);
    --primary-600: var(--color-primary-hover);
    --primary-400: var(--color-primary-light);
    --neutral-0: var(--bg-primary);
    --neutral-50: var(--bg-secondary);
    --neutral-100: var(--bg-tertiary);
    --neutral-200: var(--border-primary);
    --neutral-400: var(--brand-accent-400);
    --neutral-500: var(--text-muted);
    --neutral-600: var(--text-secondary);
    --neutral-700: var(--brand-accent-700);
    --neutral-900: var(--text-primary);
    --dental-orange: var(--color-orange);
    --dental-mint: var(--color-success);
    --dental-clean: var(--bg-secondary);
    --success-500: var(--brand-success-500);
    --warning-500: var(--system-warning-500);
    --error-500: var(--system-error-500);

    /* === 🎨 СПЕЦИАЛЬНЫЕ ПЕРЕМЕННЫЕ ДЛЯ АНИМАЦИЙ === */
    --animation-delay-1: 0.1s;
    --animation-delay-2: 0.2s;
    --animation-delay-3: 0.3s;
    --animation-delay-4: 0.4s;
    --animation-delay-5: 0.5s;

    /* Переменные для скроллбаров */
    --scrollbar-width: 8px;
    --scrollbar-track: var(--bg-tertiary);
    --scrollbar-thumb: var(--border-primary);
    --scrollbar-thumb-hover: var(--text-muted);
}

/* === 🌙 ТЕМНАЯ ТЕМА - ЕДИНСТВЕННОЕ МЕСТО ДЛЯ @media === */
@media (prefers-color-scheme: dark) {
    :root {
        /* Инвертированные семантические цвета */
        --color-primary: var(--brand-blue-400);            /* Светлее для контраста */
        --color-primary-hover: var(--brand-blue-500);
        --color-primary-light: var(--brand-blue-300);
        --color-accent: var(--brand-accent-50);            /* Светлый акцент */
        --color-accent-medium: var(--brand-accent-100);
        --color-success: var(--brand-mint-light);          /* Светлее мятный */
        --color-success-light: var(--brand-success-300);
        --color-orange: var(--brand-orange-light);         /* Светлее оранжевый */

        /* Инвертированные фоны */
        --bg-primary: var(--brand-accent-900);             /* Темный основной */
        --bg-secondary: var(--brand-accent-800);           /* Темно-серый */
        --bg-tertiary: var(--brand-accent-700);            /* Средне-серый */
        --bg-overlay: rgba(30, 41, 59, 0.95);             /* Темный overlay */
        --bg-blur: rgba(15, 23, 42, 0.85);                /* Темный blur */

        /* Инвертированные тексты */
        --text-primary: var(--brand-accent-50);            /* Светлый основной */
        --text-secondary: var(--brand-accent-200);         /* Светло-серый */
        --text-muted: var(--brand-accent-500);             /* Серый */
        --text-inverse: var(--brand-accent-900);           /* Темный обратный */
        --text-accent: var(--color-primary);               /* Светло-синий */

        /* Темные границы */
        --border-primary: var(--brand-accent-700);         /* Темные границы */
        --border-secondary: var(--brand-accent-800);       /* Еще темнее */
        --border-accent: var(--color-primary);             /* Светло-синий */
        --border-focus: var(--color-primary);              /* Светло-синий фокус */

        /* Темные состояния */
        --state-hover: rgba(56, 189, 248, 0.1);
        --state-focus: rgba(56, 189, 248, 0.15);
        --state-active: rgba(56, 189, 248, 0.2);
        --state-success: rgba(52, 211, 153, 0.1);
        --state-warning: rgba(251, 146, 60, 0.1);
        --state-error: rgba(248, 113, 113, 0.1);

        /* ✅ ОБНОВЛЕННЫЕ КОМПОНЕНТНЫЕ ПЕРЕМЕННЫЕ ДЛЯ ТЕМНОЙ ТЕМЫ */
        
        /* Кнопки */
        --btn-bg-primary: var(--gradient-primary);
        --btn-bg-primary-hover: var(--color-primary);
        --btn-text-primary: var(--text-inverse);
        --btn-border-primary: var(--color-primary);

        /* Карточки */
        --card-bg: rgba(30, 41, 59, 0.8);
        --card-border-color: var(--brand-accent-700);
        --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
        --card-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.4);

        /* Формы */
        --input-bg: var(--bg-secondary);
        --input-border: var(--border-primary);
        --input-border-focus: var(--border-accent);
        --input-text: var(--text-primary);
        --input-placeholder: var(--text-muted);

        /* ✅ CHAT-DEMO ДЛЯ ТЕМНОЙ ТЕМЫ */
        --chat-demo-bg: rgba(30, 41, 59, 0.9);
        --chat-demo-border: var(--brand-accent-700);
        --chat-message-bg: rgba(56, 189, 248, 0.1);
        --chat-message-border: var(--color-primary);
        --chat-message-text: var(--text-secondary);
        
        --quick-reply-bg: var(--bg-secondary);
        --quick-reply-border: var(--color-primary);
        --quick-reply-text: var(--color-primary);
        --quick-reply-hover-bg: var(--color-primary);
        --quick-reply-hover-text: var(--text-inverse);
        
        --chat-features-bg: rgba(56, 189, 248, 0.1);
        --chat-features-border: var(--color-primary);
        
        --chat-stat-bg: rgba(15, 23, 42, 0.9);
        --chat-stat-border: var(--brand-accent-700);
        --chat-stat-number: var(--brand-orange-light);
        --chat-stat-label: var(--text-secondary);

        /* Обновленные тени */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
        --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

        /* Темные RGB версии */
        --brand-blue-400-rgb: 56, 189, 248;
        --brand-accent-50-rgb: 248, 250, 252;
        --brand-accent-800-rgb: 30, 41, 59;
        --brand-orange-light-rgb: 251, 146, 60;
        
        /* Hero специальные переменные для темной темы */
        --gradient-hero: linear-gradient(135deg, 
            var(--bg-primary) 0%, 
            var(--bg-secondary) 50%, 
            var(--brand-blue-900) 100%
        );
        
        /* Модальные окна */
        --modal-bg: rgba(30, 41, 59, 0.95);
        --modal-backdrop: rgba(0, 0, 0, 0.8);
        --modal-border: var(--brand-accent-700);
        --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
        --modal-radius: var(--radius-xl);

        /* Уведомления для темной темы */
        --notification-success-bg: rgba(52, 211, 153, 0.15);
        --notification-success-border: var(--brand-mint-light);
        --notification-success-text: var(--brand-mint-light);
        --notification-warning-bg: rgba(251, 146, 60, 0.15);
        --notification-warning-border: var(--brand-orange-light);
        --notification-warning-text: var(--brand-orange-light);
        --notification-error-bg: rgba(248, 113, 113, 0.15);
        --notification-error-border: #f87171;
        --notification-error-text: #f87171;

        /* Градиенты для темной темы */
        --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-success));
        --gradient-accent: linear-gradient(135deg, var(--brand-orange-light), var(--brand-orange-main));
        --gradient-success: linear-gradient(135deg, var(--color-success), var(--brand-success-400));
        --gradient-clean: linear-gradient(135deg, var(--brand-accent-800), var(--brand-accent-700));
        
        /* Hero градиенты для темной темы */
        --gradient-hero-title: linear-gradient(135deg, var(--text-primary), var(--color-primary));
        --gradient-doctor-avatar: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));

        /* Скроллбары для темной темы */
        --scrollbar-track: var(--brand-accent-800);
        --scrollbar-thumb: var(--brand-accent-600);
        --scrollbar-thumb-hover: var(--brand-accent-500);
    }
}

/* === 🖨️ ПЕЧАТНЫЕ СТИЛИ === */
@media print {
    :root {
        --bg-primary: white !important;
        --bg-secondary: white !important;
        --bg-tertiary: white !important;
        --text-primary: black !important;
        --text-secondary: #333333 !important;
        --text-muted: #666666 !important;
        --border-primary: #cccccc !important;
        --color-primary: #000000 !important;
        --color-orange: #ff6600 !important;
        --shadow-md: none !important;
        --shadow-lg: none !important;
        --shadow-xl: none !important;
        --shadow-2xl: none !important;
        
        /* Chat Demo для печати */
        --chat-demo-bg: white !important;
        --chat-demo-border: #cccccc !important;
        --chat-message-bg: #f5f5f5 !important;
        --quick-reply-bg: white !important;
        --quick-reply-border: #cccccc !important;
        --chat-stat-bg: white !important;
    }
}

/* === ♿ ДОСТУПНОСТЬ === */
@media (prefers-contrast: high) {
    :root {
        --text-primary: #000000;
        --bg-primary: #ffffff;
        --border-primary: #000000;
        --color-primary: #0000ff;
        --color-orange: #ff6600;
        --color-success: #008000;
        
        /* Chat Demo для высокого контраста */
        --chat-demo-bg: #ffffff;
        --chat-demo-border: #000000;
        --chat-message-bg: #f0f0f0;
        --chat-message-border: #000000;
        --quick-reply-bg: #ffffff;
        --quick-reply-border: #000000;
        --quick-reply-text: #0000ff;
        --quick-reply-hover-bg: #0000ff;
        --quick-reply-hover-text: #ffffff;
        
        /* Кнопки для высокого контраста */
        --btn-bg-primary: #000000;
        --btn-text-primary: #ffffff;
        --btn-border-primary: #000000;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: none;
        --transition-base: none;
        --transition-slow: none;
        --transition-slowest: none;
        --duration-fast: 0.01ms;
        --duration-normal: 0.01ms;
        --duration-slow: 0.01ms;
        --duration-slowest: 0.01ms;
    }
}

/* === 🔧 ДОПОЛНИТЕЛЬНЫЕ СЛУЖЕБНЫЕ ПЕРЕМЕННЫЕ === */
:root {
    /* ✅ РАСШИРЕННЫЕ ПЕРЕМЕННЫЕ ДЛЯ ВСЕХ БЛОКОВ */
    
    /* Header блок */
    --header-bg: var(--bg-overlay);
    --header-border: var(--border-primary);
    --header-logo-color: var(--color-primary);
    --header-nav-color: var(--text-primary);
    --header-nav-hover: var(--color-primary);
    --header-cta-bg: var(--btn-bg-primary);
    --header-cta-text: var(--btn-text-primary);
    --header-phone-color: var(--color-accent);

    /* Hero блок */
    --hero-bg: var(--gradient-hero);
    --hero-title-color: var(--text-primary);
    --hero-subtitle-color: var(--text-secondary);
    --hero-feature-icon: var(--color-success);
    --hero-feature-bg: var(--state-success);
    --hero-cta-bg: var(--btn-bg-primary);
    --hero-cta-text: var(--btn-text-primary);

    /* Offers блок */
    --offer-card-bg: var(--card-bg);
    --offer-card-border: var(--card-border-color);
    --offer-title-color: var(--text-primary);
    --offer-price-color: var(--color-primary);
    --offer-btn-bg: var(--btn-bg-primary);
    --offer-btn-text: var(--btn-text-primary);
    --offer-feature-icon: var(--color-success);
    --offer-badge-bg: var(--color-primary);
    --offer-badge-text: var(--text-inverse);

    /* Team блок */
    --team-card-bg: var(--card-bg);
    --team-card-border: var(--card-border-color);
    --team-name-color: var(--color-accent);
    --team-specialty-color: var(--text-secondary);
    --team-cta-bg: var(--btn-bg-primary);
    --team-cta-text: var(--btn-text-primary);
    --team-achievement-color: var(--color-success);

    /* Results блок */
    --result-stat-number: var(--color-primary);
    --result-stat-label: var(--text-secondary);
    --result-icon-color: var(--color-primary);
    --result-bg: var(--bg-secondary);

    /* Reviews блок */
    --review-card-bg: var(--card-bg);
    --review-card-border: var(--card-border-color);
    --review-stars-color: var(--color-primary);
    --review-author-color: var(--color-accent);
    --review-text-color: var(--text-secondary);

    /* Contacts блок */
    --contact-form-bg: var(--card-bg);
    --contact-form-border: var(--card-border-color);
    --contact-input-bg: var(--input-bg);
    --contact-input-border: var(--input-border);
    --contact-input-focus: var(--input-border-focus);
    --contact-submit-bg: var(--btn-bg-primary);
    --contact-submit-text: var(--btn-text-primary);
    --contact-info-color: var(--text-primary);

    /* Footer блок */
    --footer-bg: var(--color-accent);
    --footer-text: var(--text-inverse);
    --footer-logo-color: var(--text-inverse);
    --footer-link-color: var(--text-muted);
    --footer-link-hover: var(--color-primary);
    --footer-social-color: var(--text-inverse);
    --footer-social-hover: var(--color-primary);

    /* Chatbot компонент */
    --chatbot-trigger-bg: var(--color-primary);
    --chatbot-trigger-text: var(--text-inverse);
    --chatbot-window-bg: var(--bg-overlay);
    --chatbot-window-border: var(--border-primary);
    --chatbot-bot-msg-bg: var(--bg-secondary);
    --chatbot-bot-msg-text: var(--text-primary);
    --chatbot-user-msg-bg: var(--color-primary);
    --chatbot-user-msg-text: var(--text-inverse);
    --chatbot-quick-reply-bg: var(--btn-bg-primary);
    --chatbot-quick-reply-text: var(--btn-text-primary);

    /* ✅ ПЕРЕМЕННЫЕ ДЛЯ КОМПОНЕНТОВ */
    
    /* Tooltip */
    --tooltip-bg: var(--brand-accent-800);
    --tooltip-text: var(--text-inverse);
    --tooltip-border: var(--border-primary);
    --tooltip-shadow: var(--shadow-lg);

    /* Dropdown */
    --dropdown-bg: var(--bg-overlay);
    --dropdown-border: var(--border-primary);
    --dropdown-shadow: var(--shadow-xl);
    --dropdown-item-hover: var(--state-hover);

    /* Tabs */
    --tab-bg: var(--bg-secondary);
    --tab-border: var(--border-primary);
    --tab-active-bg: var(--bg-primary);
    --tab-active-border: var(--color-primary);
    --tab-text: var(--text-secondary);
    --tab-active-text: var(--color-primary);

    /* Accordion */
    --accordion-bg: var(--bg-primary);
    --accordion-border: var(--border-primary);
    --accordion-header-bg: var(--bg-secondary);
    --accordion-header-hover: var(--state-hover);
    --accordion-text: var(--text-primary);

    /* Pagination */
    --pagination-bg: var(--bg-primary);
    --pagination-border: var(--border-primary);
    --pagination-hover: var(--state-hover);
    --pagination-active: var(--color-primary);
    --pagination-active-text: var(--text-inverse);

    /* Breadcrumb */
    --breadcrumb-text: var(--text-secondary);
    --breadcrumb-link: var(--color-primary);
    --breadcrumb-separator: var(--text-muted);

    /* Alerts */
    --alert-info-bg: var(--state-hover);
    --alert-info-border: var(--color-primary);
    --alert-info-text: var(--color-primary);
    --alert-success-bg: var(--notification-success-bg);
    --alert-success-border: var(--notification-success-border);
    --alert-success-text: var(--notification-success-text);
    --alert-warning-bg: var(--notification-warning-bg);
    --alert-warning-border: var(--notification-warning-border);
    --alert-warning-text: var(--notification-warning-text);
    --alert-error-bg: var(--notification-error-bg);
    --alert-error-border: var(--notification-error-border);
    --alert-error-text: var(--notification-error-text);

    /* ✅ СПЕЦИАЛИЗИРОВАННЫЕ ПЕРЕМЕННЫЕ ДЛЯ СТОМАТОЛОГИИ */
    
    /* Dental colors - семантические цвета для стоматологии */
    --dental-health: var(--color-success);        /* Здоровые зубы */
    --dental-attention: var(--system-warning-500); /* Требует внимания */
    --dental-problem: var(--system-error-500);     /* Проблемы */
    --dental-treatment: var(--color-primary);      /* Лечение */
    --dental-prevention: var(--brand-mint-main);   /* Профилактика */
    
    /* Dental procedure colors */
    --procedure-cleaning: var(--brand-mint-main);
    --procedure-filling: var(--color-primary);
    --procedure-crown: var(--brand-orange-main);
    --procedure-implant: var(--brand-accent-700);
    --procedure-orthodontics: var(--brand-blue-400);

    /* ✅ ПЕРЕМЕННЫЕ ДЛЯ PERFORMANCE */
    
    /* GPU ускорение */
    --gpu-transform: translateZ(0);
    --hardware-acceleration: translate3d(0, 0, 0);
    --backface-visibility: hidden;
    
    /* Оптимизация рендеринга */
    --will-change-transform: transform;
    --will-change-opacity: opacity;
    --will-change-auto: auto;

    /* ✅ ПЕРЕМЕННЫЕ ДЛЯ КАСТОМИЗАЦИИ БЛОКОВ */
    
    /* Возможность переопределения в отдельных блоках */
    --block-bg: var(--bg-primary);
    --block-text: var(--text-primary);
    --block-border: var(--border-primary);
    --block-shadow: var(--shadow-md);
    --block-radius: var(--radius-lg);
    --block-padding: var(--spacing-lg);
    --block-margin: var(--spacing-md);

    /* Кастомные переменные для специальных случаев */
    --custom-primary: var(--color-primary);
    --custom-secondary: var(--color-accent);
    --custom-accent: var(--color-orange);
    --custom-bg: var(--bg-primary);
    --custom-text: var(--text-primary);
}