/* 
 * CSS Variables for Flussonic Manager
 * Централизованная система цветов и стилей
 */

:root {
  /* Основные цвета Bootstrap */
  --primary-color: #667eea;
  --success-color: #198754;
  --danger-color: #dc3545;
  --warning-color: #fd7e14;
  --info-color: #0dcaf0;
  --secondary-color: #6c757d;
  --light-color: #f8f9fa;
  --dark-color: #212529;

  /* Дополнительные цвета для градиентов */
  --purple-color: #9c27b0;
  --teal-color: #26a69a;
  --indigo-color: #3f51b5;
  --cyan-color: #00bcd4;
  --lime-color: #8bc34a;

  /* Border radius система */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 12px;  /* Уменьшен с 50px до 12px для более умеренного скоса */

  /* Тени */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 25px rgba(0,0,0,0.15);
  --shadow-xl: 0 12px 35px rgba(0,0,0,0.2);

  /* Переходы */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
  --transition-colors: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;

  /* Шрифты */
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;

  /* Отступы */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* Цвета фона */
  --bg-card: #ffffff;
  --bg-light: #f8f9fa;
  --bg-dark: #343a40;

  /* Границы */
  --border-color: #dee2e6;
  --border-color-light: #e9ecef;
  --border-width: 1px;

  /* Прозрачности */
  --opacity-disabled: 0.6;
  --opacity-muted: 0.75;

  /* Focus стили */
  --shadow-focus-primary: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
  --primary-color-light: rgba(102, 126, 234, 0.1);
}

/* Текстовые цвета для кастомных градиентов */
.text-purple { color: var(--purple-color) !important; }
.text-teal { color: var(--teal-color) !important; }
.text-indigo { color: var(--indigo-color) !important; }
.text-cyan { color: var(--cyan-color) !important; }
.text-lime { color: var(--lime-color) !important; }