:root {
  /* ====== ОБЩИЕ ПЕРЕМЕННЫЕ (ТЕМНАЯ ТЕМА ПО УМОЛЧАНИЮ) ====== */
  
  /* Цвета */
  --color-primary: #007AFF;
  --color-secondary: #5856D6;
  --color-success: #34C759;
  --color-danger: #FF3B30;
  --color-warning: #FF9500;
    
  /* Фоны темной темы (по умолчанию) */
  --color-bg: #0f1115;
  --color-bg-secondary: #1c1c1e;
  --color-bg-tertiary: #2c2c2e;
    
  /* Текст темной темы */
  --color-text: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.6);
  --color-text-tertiary: rgba(255, 255, 255, 0.3);
    
  /* Отступы */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
    
  /* Радиусы */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
    
  /* Тени */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);

  /* Цвета градиентов */
  --gradient-primary: linear-gradient(270deg, rgba(21, 81, 229, 1) 0%, rgba(0, 34, 255, 1) 100%);
  --gradient-blue: linear-gradient(135deg, #1f4cff, #0a3fa9);

  /* Цвета навбара */
  --navbar-bg: rgba(46, 46, 46, 0.1);
  --navbar-border: rgba(60, 60, 67, 0.36);

  /* Цвета карточек */
  --card-bg: var(--color-bg-secondary);
  --card-bg-light: rgba(255, 255, 255, 0.1);

  /* Цвета текста навбара */
  --nav-text: #8E8E93;
  --nav-text-active: #007AFF;

  /* Размеры навбара */
  --navbar-height: 80px;
  --nav-item-width: 72px;
  --nav-item-height: 44px;

  /* Анимации */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ====== СВЕТЛАЯ ТЕМА ====== */
:root.theme-light {
  /* ПЕРЕОПРЕДЕЛЯЕМ ВСЕ ЦВЕТА ДЛЯ СВЕТЛОЙ ТЕМЫ */
  
  /* Основные фоны */
  --color-bg: #EFEEF4;              /* ← ГЛАВНОЕ: ФОН СВЕТЛОЙ ТЕМЫ */
  --color-bg-primary: #EFEEF4;
  --color-bg-secondary: #E5E4EA;
  --color-bg-tertiary: #DAD9DF;
  
  /* Текст */
  --color-text: #000000;
  --color-text-secondary: #666666;
  --color-text-tertiary: #999999;
  
  /* Акцентные цвета */
  --color-primary: #007aff;
  --color-secondary: #5856d6;
  
  /* Карточки */
  --card-bg: #ffffff;
  --card-bg-light: #f8f8f8;
  
  /* Градиенты */
  --gradient-primary: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
  
  /* Тени */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  
  /* Формы */
  --input-bg: #ffffff;
  --input-border: #e0e0e0;
  --input-text: #000000;
  
  /* Статусы */
  --success: #34c759;
  --warning: #ff9500;
  --error: #ff3b30;
  --info: #007aff;
  
  /* Переменные из макета Figma для переключателя */
  --shape-light: #f0f0f0;      /* Фон переключателя */
  --background-light: #ffffff; /* Фон активной кнопки */
  --top-dark: #000000;         /* Цвет текста */

  /* Navbar цвета для светлой темы */
  --nav-text: rgb(28, 28, 28);          /* Черный для неактивных элементов */
  --nav-text-active: #007aff;           /* Синий для активных (оставляем как было) */
  
  /* Фон navbar для светлой темы */
  --navbar-bg: rgba(255, 255, 255, 0.9); /* Полупрозрачный белый */
  --navbar-border: rgba(0, 0, 0, 0.1);   /* Светлая граница */
}

/* ====== ТЁМНАЯ ТЕМА (ЯВНОЕ ПЕРЕОПРЕДЕЛЕНИЕ) ====== */
:root.theme-dark {
  /* ОСНОВНЫЕ ФОНЫ */
  --color-bg: #0f1115;
  --color-bg-primary: #0f1115;
  --color-bg-secondary: #181818;
  --color-bg-tertiary: #2c2c2e;
  
  /* ТЕКСТ */
  --color-text: #ffffff;
  --color-text-secondary: #a0a0a0;
  --color-text-tertiary: #737375;
  
  /* АКЦЕНТНЫЕ ЦВЕТА */
  --color-primary: #0a84ff;
  --color-secondary: #5e5ce6;
  
  /* КАРТОЧКИ */
  --card-bg: #1c1c1e;
  --card-bg-light: #2c2c2e;
  
  /* ГРАДИЕНТЫ */
  --gradient-primary: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 100%);
  
  /* ТЕНИ */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  
  /* ФОРМЫ */
  --input-bg: #1c1c1e;
  --input-border: #38383a;
  --input-text: #ffffff;
  
  /* СТАТУСЫ */
  --success: #30d158;
  --warning: #ff9f0a;
  --error: #ff453a;
  --info: #0a84ff;
}