/* CSS Variables - Токены дизайна */

/* Светлая тема — по умолчанию */
:root {
  --bg-body: #ffffff;
  --bg-card: #f8f9fa;
  --bg-secondary: rgba(0, 0, 0, 0.05);
  --bg-hover: rgba(0, 0, 0, 0.05);
  --border-color: #e0e0e0;
  --text-primary: #333333;
  --text-secondary: #666666;
  --accent-color: #4CAF50;
  --accent-hover: #45a049;
  --error-color: #f44336;
  --footer-bg: #ffffff;
  --button-hover-bg: #e6f0ff;
  --button-active-bg: #e6f0ff;
  --button-active-color: #007aff;
  --button-hover-shadow: rgba(0, 0, 0, 0.1);
  --settings-hover-bg: #e6f0ff;
  --settings-hover-border: #007aff;
  --settings-hover-shadow: rgba(0, 122, 255, 0.15);
  --settings-hover-text-primary: #007aff;
  --settings-hover-text-secondary: #0051a8;
}

/* Тёмная тема — через класс */
.theme-dark {
  --bg-body: #121212;
  --bg-card: #1e1e1e;
  --bg-secondary: rgba(255, 255, 255, 0.05);
  --bg-hover: rgba(255, 255, 255, 0.05);
  --border-color: #333333;
  --text-primary: #ffffff;
  --text-secondary: #bbbbbb;
  --accent-color: #4da6ff;
  --accent-hover: #338fff;
  --error-color: #ff6b6b;
  --footer-bg: #1e1e1e;
  --button-hover-bg: #2a2a2a;
  --button-active-bg: #2a2a2a;
  --button-active-color: #4da6ff;
  --button-hover-shadow: rgba(255, 255, 255, 0.05);
  --settings-hover-bg: #2a2a2a;
  --settings-hover-border: #4da6ff;
  --settings-hover-shadow: rgba(77, 166, 255, 0.2);
  --settings-hover-text-primary: #4da6ff;
  --settings-hover-text-secondary: #99ccff;
}

/* Поддержка системной темы в браузере */
@media (prefers-color-scheme: dark) {
  :not(.theme-light) {
    --bg-body: #121212;
    --bg-card: #1e1e1e;
    --bg-secondary: rgba(255, 255, 255, 0.05);
    --bg-hover: rgba(255, 255, 255, 0.05);
    --border-color: #333333;
    --text-primary: #ffffff;
    --text-secondary: #bbbbbb;
    --accent-color: #4da6ff;
    --accent-hover: #338fff;
    --error-color: #ff6b6b;
    --footer-bg: #1e1e1e;
    --button-hover-bg: #2a2a2a;
    --button-active-bg: #2a2a2a;
    --button-active-color: #4da6ff;
    --button-hover-shadow: rgba(255, 255, 255, 0.05);
    --settings-hover-bg: #2a2a2a;
    --settings-hover-border: #4da6ff;
    --settings-hover-shadow: rgba(77, 166, 255, 0.2);
    --settings-hover-text-primary: #4da6ff;
    --settings-hover-text-secondary: #99ccff;
  }
}