:root {
    /* Светлая тема - базовые цвета */
    --gray-0: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-500: #6b7280;
    --bg-primary: #f7f9fc;
    --bg-secondary: #ffffff;
    --text-primary: #111827;
    --text-secondary: #475569;
    --border-color: #e5e7eb;
    --primary-color: #B4BCFC;
    --primary-600: #B4BCFC;
    --primary-500: #B4BCFC;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(229, 231, 235, 0.6);
    --surface-primary: #ffffff;
    --surface-hover: #f3f4f6;
    --surface-tertiary: #f9fafb;
    --nav-hover: #f3f4f6;
    --focus-ring-color: #B4BCFC;
    --focus-ring-color-rgb: 180, 188, 252;
    --shadow-color-rgb: 0, 0, 0;
    --radius-base: 0.5rem;
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    
    /* Дополнительные переменные для совместимости */
    --text-inverse: #ffffff;
    --text-muted: #6b7280;
    --surface-secondary: #f3f4f6;
    --input-bg: #f9fafb;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.75rem;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --primary-400: #9EA8FB;
    --primary-700: #7483f9;
    --primary-900: #4f46e5;
    --primary-rgb: 180, 188, 252;
    --success-rgb: 34, 197, 94;
    --warning-rgb: 245, 158, 11;
    --danger-rgb: 239, 68, 68;
    --info-rgb: 59, 130, 246;
    
    /* Алиасы для старой системы переменных (для совместимости) */
    --color-warning: var(--warning-500);
    --color-primary: var(--primary-500);
    --color-secondary: var(--primary-600);
    --color-accent-light: var(--primary-400);
    --color-accent-dark: var(--primary-700);
    --color-success: var(--success-500);
    --color-info: var(--info-500);
    --color-bg-primary: var(--bg-primary);
    --color-bg-secondary: var(--bg-secondary);
    
    --color-text-main: var(--text-primary);
    --color-text-muted: var(--text-muted);
    --color-border: var(--border-color);
    --color-bg-card: var(--surface-primary);
    --color-bg-body: var(--surface-secondary);
    --color-bg-input: var(--input-bg);
    --color-bg-hover: var(--surface-hover);
    --color-primary-light: var(--info-50);
    --hover-bg: var(--surface-hover);
    --primary-dark: var(--primary-700);
    --warning-bg: var(--warning-50);
    
    /* Цвета для темной темы */
    --dark-gray-800: #1f2937;
    --dark-gray-900: #111827;
    --dark-gray-700: #374151;
    --dark-gray-600: #4b5563;
    --dark-gray-400: #9ca3af;
    --dark-gray-300: #d1d5db;
    --dark-gray-0: #ffffff;
    --dark-bg-primary: #10161d;
    --dark-bg-secondary: #1f2937;
    --dark-text-primary: #e2e8f0;
    --dark-text-secondary: #c7d2fe;
    --dark-border-color: #374151;
    --dark-primary-color: #9EA8FB;
    --dark-glass-bg: rgba(15, 23, 42, 0.85);
    --dark-glass-border: rgba(55, 65, 81, 0.6);
    --dark-surface-primary: #1f2937;
    --dark-surface-hover: #374151;
    --dark-surface-tertiary: #2d3748;
    --dark-focus-ring-color: #9EA8FB;
    --dark-focus-ring-color-rgb: 158, 168, 251;
    --dark-shadow-color-rgb: 0, 0, 0;
    
    /* Цвета статусов для светлой темы */
    --success-50: #f0fdf4;
    --success-100: #dcfce7;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;
    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    --info-50: #eff6ff;
    --info-100: #dbeafe;
    --info-500: #3b82f6;
    --info-600: #2563eb;
    --info-700: #1d4ed8;
    
    /* Цвета статусов для темной темы */
    --dark-success-50: #052e16;
    --dark-success-100: #14532d;
    --dark-success-500: #22c55e;
    --dark-success-600: #16a34a;
    --dark-success-700: #15803d;
    --dark-danger-50: #450a0a;
    --dark-danger-100: #7f1d1d;
    --dark-danger-500: #ef4444;
    --dark-danger-600: #dc2626;
    --dark-danger-700: #b91c1c;
    --dark-warning-50: #451a03;
    --dark-warning-100: #78350f;
    --dark-warning-500: #f59e0b;
    --dark-warning-600: #d97706;
    --dark-warning-700: #b45309;
    --dark-info-50: #172554;
    --dark-info-100: #1e3a8a;
    --dark-info-500: #3b82f6;
    --dark-info-600: #2563eb;
    --dark-info-700: #1d4ed8;
    
    /* Дополнительные переменные для темной темы */
    --dark-text-inverse: #ffffff;
    --dark-text-muted: #9ca3af;
    --dark-surface-secondary: #374151;
    --dark-primary-400: #7483f9;
    --dark-primary-700: #4f46e5;
    --dark-primary-900: #4338ca;
    --dark-primary-rgb: 158, 168, 251;
    --dark-success-rgb: 34, 197, 94;
    --dark-warning-rgb: 245, 158, 11;
    --dark-danger-rgb: 239, 68, 68;
    --dark-info-rgb: 59, 130, 246;
    
    /* Алиасы для старой системы переменных в темной теме */
    --dark-color-warning: var(--dark-warning-500);
    --dark-color-primary: var(--dark-primary-500);
    --dark-color-secondary: var(--dark-primary-600);
    --dark-color-accent-light: var(--dark-primary-400);
    --dark-color-accent-dark: var(--dark-primary-700);
    --dark-color-success: var(--dark-success-500);
    --dark-color-info: var(--dark-info-500);
    --dark-color-bg-primary: var(--dark-bg-primary);
    --dark-color-bg-secondary: var(--dark-bg-secondary);
}

/* Применение базовых цветов */
html {
    background: var(--bg-primary)
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    padding: 0
}

/* Темная тема - применяется немедленно */
html[data-theme="dark"] {
    background: var(--dark-bg-primary)
}

html[data-theme="dark"] body {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary)
}

html[data-theme="dark"] .header-minimal {
    background: var(--dark-glass-bg);
    border-color: var(--dark-glass-border)
}

html[data-theme="dark"] {
    --gray-800: var(--dark-gray-800);
    --gray-900: var(--dark-gray-900);
    --gray-700: var(--dark-gray-700);
    --gray-600: var(--dark-gray-600);
    --gray-400: var(--dark-gray-400);
    --gray-300: var(--dark-gray-300);
    --gray-0: var(--dark-gray-0);
    --glass-bg: var(--dark-glass-bg);
    --glass-border: var(--dark-glass-border);
    --primary-color: var(--dark-primary-color);
    --surface-primary: var(--dark-surface-primary);
    --surface-hover: var(--dark-surface-hover);
    --surface-tertiary: var(--dark-surface-tertiary);
    --nav-hover: var(--dark-surface-hover);
    --focus-ring-color: var(--dark-focus-ring-color);
    --focus-ring-color-rgb: var(--dark-focus-ring-color-rgb);
    --shadow-color-rgb: var(--dark-shadow-color-rgb);
    --success-50: var(--dark-success-50);
    --success-100: var(--dark-success-100);
    --success-500: var(--dark-success-500);
    --success-600: var(--dark-success-600);
    --success-700: var(--dark-success-700);
    --danger-50: var(--dark-danger-50);
    --danger-100: var(--dark-danger-100);
    --danger-500: var(--dark-danger-500);
    --danger-600: var(--dark-danger-600);
    --danger-700: var(--dark-danger-700);
    --warning-50: var(--dark-warning-50);
    --warning-100: var(--dark-warning-100);
    --warning-500: var(--dark-warning-500);
    --warning-600: var(--dark-warning-600);
    --warning-700: var(--dark-warning-700);
    --info-50: var(--dark-info-50);
    --info-100: var(--dark-info-100);
    --info-500: var(--dark-info-500);
    --info-600: var(--dark-info-600);
    --info-700: var(--dark-info-700);
    --text-inverse: var(--dark-text-inverse);
    --text-muted: var(--dark-text-muted);
    --surface-secondary: var(--dark-surface-secondary);
    --primary-400: var(--dark-primary-400);
    --primary-700: var(--dark-primary-700);
    --primary-900: var(--dark-primary-900);
    --primary-rgb: var(--dark-primary-rgb);
    --success-rgb: var(--dark-success-rgb);
    --warning-rgb: var(--dark-warning-rgb);
    --danger-rgb: var(--dark-danger-rgb);
    --info-rgb: var(--dark-info-rgb);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --color-warning: var(--dark-color-warning);
    --color-primary: var(--dark-color-primary);
    --color-secondary: var(--dark-color-secondary);
    --color-accent-light: var(--dark-color-accent-light);
    --color-accent-dark: var(--dark-color-accent-dark);
    --color-success: var(--dark-color-success);
    --color-info: var(--dark-color-info);
    --color-bg-primary: var(--dark-color-bg-primary);
    --color-bg-secondary: var(--dark-color-bg-secondary);
}

/* Отключаем все переходы при загрузке страницы */
body.theme-loading * {
    transition: none !important;
    animation-duration: 0s !important;
}