/*
 * ТЕМНАЯ ТЕМА COFFEERANKS v3.0
 * Дата: 2025-08-25
 * Современная темная тема с поддержкой автоматического переключения
 */

/* =============================================================================
   ТЕМНАЯ ЦВЕТОВАЯ ПАЛИТРА
   ============================================================================= */

/* Автоматическое переключение на темную тему */
@media (prefers-color-scheme: dark) {
  :root {
    /* Основные цвета в темной теме */
    --primary-brown: #D2691E;
    --primary-accent: #F4A460;
    --primary-light: #CD853F;
    
    /* Поверхности */
    --surface-white: #1A1A1A;
    --surface-elevated: #2D2D2D;
    --surface-overlay: rgba(45, 45, 45, 0.95);
    
    /* Текст */
    --text-primary: #FFFFFF;
    --text-secondary: #CCCCCC;
    --text-muted: #999999;
    
    /* Границы и тени */
    --border-subtle: #404040;
    --border-light: #333333;
    --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.5);
    
    /* Градиенты для темной темы */
    --gradient-coffee: linear-gradient(135deg, var(--primary-brown) 0%, var(--primary-accent) 100%);
    --gradient-surface: linear-gradient(135deg, #2D2D2D 0%, #1A1A1A 100%);
  }
  
  /* Базовые элементы */
  body {
    background-color: var(--surface-white);
    color: var(--text-primary);
  }
  
  /* Навигация */
  .main-header {
    background: var(--surface-overlay);
    border-bottom-color: var(--border-subtle);
  }
  
  /* Карточки кофе */
  .coffee-card {
    background: var(--surface-elevated);
    border-color: var(--border-subtle);
  }
  
  .coffee-card:hover {
    border-color: var(--border-light);
    box-shadow: var(--shadow-strong);
  }
  
  /* Фильтры */
  .filters-section {
    background: var(--surface-elevated);
    border-color: var(--border-subtle);
  }
  
  .filter-chip {
    background: var(--surface-white);
    border-color: var(--border-subtle);
    color: var(--text-secondary);
  }
  
  .filter-chip:hover {
    background: var(--surface-elevated);
    border-color: var(--primary-brown);
    color: var(--primary-brown);
  }
  
  .filter-chip.active {
    background: var(--primary-brown);
    color: white;
    border-color: var(--primary-brown);
  }
  
  /* Формы */
  .form-input,
  .search-input {
    background: var(--surface-white);
    border-color: var(--border-subtle);
    color: var(--text-primary);
  }
  
  .form-input:focus,
  .search-input:focus {
    border-color: var(--primary-brown);
    box-shadow: 0 0 0 3px rgba(210, 105, 30, 0.2);
  }
  
  .form-input::placeholder,
  .search-input::placeholder {
    color: var(--text-muted);
  }
  
  /* Кнопки */
  .btn-secondary {
    background: var(--surface-white);
    color: var(--text-primary);
    border-color: var(--border-subtle);
  }
  
  .btn-secondary:hover {
    background: var(--surface-elevated);
    border-color: var(--primary-brown);
    color: var(--primary-brown);
  }
  
  .btn-ghost:hover {
    background: var(--surface-white);
    border-color: var(--border-subtle);
  }
  
  /* Модальные окна */
  .modal {
    background: var(--surface-elevated);
  }
  
  .modal-header {
    border-bottom-color: var(--border-subtle);
  }
  
  /* Скелетоны загрузки */
  .loading-skeleton {
    background: linear-gradient(
      90deg,
      var(--surface-white) 25%,
      var(--border-light) 50%,
      var(--surface-white) 75%
    );
  }
  
  /* Вкусовые ноты - адаптация для темной темы */
  .taste-note.fruity {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.5);
    color: #FCD34D;
  }
  
  .taste-note.nutty {
    background: rgba(156, 163, 175, 0.2);
    border-color: rgba(156, 163, 175, 0.5);
    color: #D1D5DB;
  }
  
  .taste-note.chocolatey {
    background: rgba(236, 72, 153, 0.2);
    border-color: rgba(236, 72, 153, 0.5);
    color: #F9A8D4;
  }
  
  .taste-note.floral {
    background: rgba(167, 139, 250, 0.2);
    border-color: rgba(167, 139, 250, 0.5);
    color: #C4B5FD;
  }
  
  .taste-note.spicy {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #FCA5A5;
  }
  
  .taste-note.caramel {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.5);
    color: #FDE68A;
  }
  
  /* Цена и рейтинг */
  .coffee-price {
    color: var(--primary-accent);
  }
  
  .coffee-roast {
    background: var(--surface-white);
    border-color: var(--border-subtle);
    color: var(--text-secondary);
  }
  
  /* Изображения - добавляем тонкую рамку для контраста */
  .coffee-image img {
    border: 1px solid var(--border-subtle);
  }
  
  /* Ценовые слайдеры */
  .price-track {
    background: var(--border-subtle);
  }
  
  .price-range-display {
    background: var(--surface-white);
    border-color: var(--border-subtle);
    color: var(--primary-brown);
  }
  
  .price-input-group input {
    background: var(--surface-white);
    border-color: var(--border-subtle);
    color: var(--text-primary);
  }
  
  /* Пустое состояние */
  .empty-icon {
    color: var(--text-muted);
  }
  
  .empty-title {
    color: var(--text-primary);
  }
  
  .empty-description {
    color: var(--text-secondary);
  }
}

/* =============================================================================
   ПРИНУДИТЕЛЬНАЯ ТЕМНАЯ ТЕМА (УПРАВЛЯЕМАЯ КЛАССОМ)
   ============================================================================= */

/* Класс для ручного переключения темной темы */
.dark-theme {
  /* Применяем те же стили, что и для prefers-color-scheme: dark */
  --primary-brown: #D2691E;
  --primary-accent: #F4A460;
  --primary-light: #CD853F;
  
  --surface-white: #1A1A1A;
  --surface-elevated: #2D2D2D;
  --surface-overlay: rgba(45, 45, 45, 0.95);
  
  --text-primary: #FFFFFF;
  --text-secondary: #CCCCCC;
  --text-muted: #999999;
  
  --border-subtle: #404040;
  --border-light: #333333;
  --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.5);
  
  --gradient-coffee: linear-gradient(135deg, var(--primary-brown) 0%, var(--primary-accent) 100%);
  --gradient-surface: linear-gradient(135deg, #2D2D2D 0%, #1A1A1A 100%);
}

.dark-theme body {
  background-color: var(--surface-white);
  color: var(--text-primary);
}

/* =============================================================================
   ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ
   ============================================================================= */

.theme-toggle {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 1000;
  background: var(--surface-elevated);
  border: 1.5px solid var(--border-subtle);
  border-radius: 50px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-medium);
  width: 56px;
  height: 28px;
  display: flex;
  align-items: center;
}

.theme-toggle:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: var(--shadow-strong);
}

.theme-toggle-slider {
  width: 20px;
  height: 20px;
  background: var(--primary-brown);
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
}

.theme-toggle.dark .theme-toggle-slider {
  transform: translateX(28px);
  background: var(--primary-accent);
}

/* Иконки для переключателя */
.theme-toggle-slider:before {
  content: '☀️';
}

.theme-toggle.dark .theme-toggle-slider:before {
  content: '🌙';
}

/* =============================================================================
   АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ В ТЕМНОЙ ТЕМЕ
   ============================================================================= */

@media (max-width: 768px) {
  .theme-toggle {
    position: fixed;
    bottom: 80px;
    right: 20px;
    top: auto;
    transform: none;
  }
  
  @media (prefers-color-scheme: dark) {
    .mobile-filters-toggle {
      background: var(--primary-brown);
      box-shadow: var(--shadow-strong);
    }
    
    .filters-overlay.active {
      background: rgba(0, 0, 0, 0.8);
    }
  }
}

/* =============================================================================
   ПЛАВНЫЕ ПЕРЕХОДЫ ДЛЯ ПЕРЕКЛЮЧЕНИЯ ТЕМ
   ============================================================================= */

/* Анимация при переключении темы */
* {
  transition: background-color 0.3s ease, 
              border-color 0.3s ease, 
              color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Исключения для элементов, которые не должны анимироваться */
.coffee-card,
.filter-chip,
.btn {
  transition: all 0.3s ease; /* Сохраняем их собственные переходы */
}

/* =============================================================================
   ДОПОЛНИТЕЛЬНЫЕ УЛУЧШЕНИЯ ДЛЯ ТЕМНОЙ ТЕМЫ
   ============================================================================= */

/* Улучшенный контраст для важных элементов */
@media (prefers-color-scheme: dark) {
  .coffee-name {
    color: var(--text-primary);
    font-weight: 600;
  }
  
  .coffee-roaster {
    color: var(--primary-accent);
    font-weight: 500;
  }
  
  .rating-value {
    color: var(--text-primary);
    font-weight: 600;
  }
  
  /* Логотип - инверсия для темной темы */
  .logo-icon {
    filter: brightness(1.2) contrast(1.1);
  }
  
  /* Иконки навигации */
  .nav-icon {
    opacity: 0.9;
  }
  
  .nav-links a.active .nav-icon {
    opacity: 1;
  }
}