/* app/css/variables.css */
:root {
  /* Цветовая схема - общие переменные, одинаковые для обеих тем */
  --color-primary: #00B4D8;
  --color-primary-light: #90E0EF;
  --color-primary-dark: #0077B6;
  --color-secondary: #FFB800;
  --color-tertiary: #FF5A5F;
  --color-success: #43AA8B;
  --color-error: #EF476F;
  --color-warning: #F9C74F;
  
  /* Размеры и отступы для мобильных адаптаций */
  --mobile-padding: 12px;
  --mobile-button-size: 32px;
  --mobile-font-size-large: 18px;
  --mobile-font-size-normal: 14px;
  --mobile-font-size-small: 12px;
  --mobile-border-radius: 16px;
  
  /* Пороги для адаптивного дизайна */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  
  /* Фоны и текст */
  --color-background: #0D0221;
  --color-background-light: #1B1E3D;
  --color-background-lighter: #2A2F57;
  --color-text: #E9ECEF;
  --color-text-light: #A9B2BC;
  --color-text-dark: #495057;
  --color-text-muted: #ADB5BD;
  --color-border: #2C365E;
  
  /* Шрифты */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Exo 2', sans-serif;
  --font-monospace: 'JetBrains Mono', monospace;
  
  /* Размеры и скругления */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 15px 25px rgba(0, 0, 0, 0.15);
  
  /* Анимации */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Размеры шрифта */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem;  /* 36px */
  
  /* Z-индексы */
  --z-index-base: 1;
  --z-index-controls: 10;
  --z-index-modal: 100;
  --z-index-tooltip: 50;
  --z-index-loader: 1000;
  
  /* Эффекты */
  --glow-primary: 0 0 10px rgba(0, 180, 216, 0.5);
  --glow-secondary: 0 0 10px rgba(255, 184, 0, 0.5);
  --glow-tertiary: 0 0 10px rgba(255, 90, 95, 0.5);
  
  --logo-text-color: #fff;
  --logo-bg-color: #171717;
  --logo-dots-color: #4ac8f0;
}

/* Темная тема (по умолчанию) */
:root, [data-theme="dark"] {
  --color-background: #0D0221;
  --color-background-light: #1B1E3D;
  --color-background-lighter: #2A2F57;
  --color-text: #E9ECEF;
  --color-text-muted: #ADB5BD;
  --color-text-light: #F8F9FA;
  --color-border: #495057;
  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-backdrop: rgba(13, 2, 33, 0.7);
  --color-card-bg: rgba(27, 30, 61, 0.8);
  --color-modal-bg: #1B1E3D;
  --color-tooltip-bg: rgba(43, 48, 86, 0.9);
  --color-chart-grid: rgba(173, 181, 189, 0.2);
  
  /* Фоны и градиенты для темной темы */
  --gradient-header: linear-gradient(135deg, #1B1E3D 0%, #0D0221 100%);
  --gradient-panel: linear-gradient(180deg, rgba(18, 21, 56, 0.8), rgba(14, 17, 46, 0.8));
  --gradient-button: linear-gradient(135deg, #2A2F57 0%, #1B1E3D 100%);
  --gradient-button-hover: linear-gradient(135deg, #3A4DB0 0%, #5645C3 100%);
  --gradient-card: linear-gradient(135deg, rgba(27, 30, 61, 0.9) 0%, rgba(13, 2, 33, 0.9) 100%);
  
  /* Для частиц */
  --particle-core-color: #00B4D8;
  --particle-field-color: rgba(0, 180, 216, 0.3);
  --particle-orbit-color: rgba(173, 181, 189, 0.2);
  
  color-scheme: dark;
}

/* Светлая тема */
[data-theme="light"] {
  --color-background: #F8F9FA;
  --color-background-light: #FFFFFF;
  --color-background-lighter: #E9ECEF;
  --color-text: #212529;
  --color-text-muted: #6C757D;
  --color-text-light: #495057;
  --color-border: #DEE2E6;
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-backdrop: rgba(248, 249, 250, 0.8);
  --color-card-bg: rgba(255, 255, 255, 0.9);
  --color-modal-bg: #FFFFFF;
  --color-tooltip-bg: rgba(233, 236, 239, 0.95);
  --color-chart-grid: rgba(108, 117, 125, 0.2);
  
  /* Фоны и градиенты для светлой темы */
  --gradient-header: linear-gradient(135deg, #FFFFFF 0%, #E9ECEF 100%);
  --gradient-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(233, 236, 239, 0.9));
  --gradient-button: linear-gradient(135deg, #FFFFFF 0%, #E9ECEF 100%);
  --gradient-button-hover: linear-gradient(135deg, #CED4DA 0%, #ADB5BD 100%);
  --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(233, 236, 239, 0.95) 100%);
  
  /* Для частиц */
  --particle-core-color: #0077B6;
  --particle-field-color: rgba(0, 119, 182, 0.3);
  --particle-orbit-color: rgba(108, 117, 125, 0.2);
  
  color-scheme: light;
  
  --logo-text-color: #1e3d6b;
  --logo-bg-color: #4ac8f0;
  --logo-dots-color: #171717;
}

/* Удаляем медиа-запрос для выбора темы на основе предпочтений системы, 
   теперь это будет делаться через JavaScript и data-атрибут */