/* =========================================
    CSS VARIABLES (глобальные переменные)
========================================= */

:root {
  /* Основные цвета (акценты) */
  --primary: #007bff; /* Основной синий — кнопки, ссылки, акценты */
  --primary-hover: #0062cc; /* Темнее для hover */
  --primary-active: #0056b3; /* Ещё темнее для active */
  --primary-light: #e6f0ff; /* Очень светлый фон/подсветка */

  --success: #28a745; /* Успех, зелёный */
  --warning: #ffc107; /* Предупреждение, жёлтый */
  --danger: #dc3545; /* Ошибка, красный */
  --info: #17a2b8; /* Инфо, голубой */

  /* Текст */
  --text-primary: #212529; /* Основной текст (чёрный) */
  --text-secondary: #495057; /* Второстепенный текст (серый) */
  --text-tertiary: #6c757d; /* Третичный текст (ещё светлее) */
  --text-muted: #adb5bd; /* Очень слабый текст (подписи, disabled) */
  --text-light: #ffffff; /* Белый текст на тёмном фоне */

  /* Фон */
  --bg-body: #f8f9fa; /* Основной фон страницы */
  --bg-card: #ffffff; /* Фон карточек, модалок */
  --bg-surface: #f1f3f5; /* Поверхности (таблицы, блоки) */
  --bg-hover: rgba(0, 123, 255, 0.08); /* Hover-подсветка */
  --bg-darkening: rgba(0, 0, 0, 0.5);

  /* Границы */
  --border: #dee2e6; /* Основная граница */
  --border-strong: #ced4da; /* Более заметная граница */
  --border-input: #ced4da; /* Граница инпутов */
  --border-focus: #80bdff; /* Фокус на инпуте */

  /* Тени */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);

  /* Переходы */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Отступы (scale: 4px * n) */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.25rem; /* 20px */
  --spacing-xl: 1.5rem; /* 24px */
  --spacing-2xl: 2rem; /* 32px */
}

/* Тёмная тема (автоматическая или ручная) 
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #4d9fff;
    --primary-hover: #3b8cff;
    --primary-light: #1a3b5e;

    --text-primary: #e9ecef;
    --text-secondary: #adb5bd;
    --text-tertiary: #6c757d;
    --text-muted: #495057;

    --bg-body: #121212;
    --bg-card: #1e1e1e;
    --bg-surface: #252525;
    --bg-hover: rgba(77, 159, 255, 0.12);

    --border: #343a40;
    --border-strong: #495057;
    --border-input: #495057;
    --border-focus: #4d9fff;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
  }
}
*/