/* ========================================
   ДИЗАЙН-СИСТЕМА ПОДГРУЗИ
   ======================================== */

/* Импорт шрифтов */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@300;400;500;600&display=swap');

:root {
  /* === ОСНОВНЫЕ ЦВЕТА === */
  --color-primary: #0079FF;
  --color-primary-hover: #0056CC;
  --color-primary-light: #f0f8ff;
  --color-primary-shadow: rgba(0, 122, 255, 0.3);
  --color-primary-shadow-hover: rgba(0, 122, 255, 0.4);
  
  /* === АКЦЕНТНЫЕ ЦВЕТА === */
  --color-accent: #72499F;
  --color-accent-secondary: #5856D6;
  
  /* === ГРАДИЕНТЫ === */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-app-icon: linear-gradient(45deg, var(--color-primary), var(--color-accent-secondary));
  
  /* === ТЕКСТОВЫЕ ЦВЕТА === */
  --color-text-primary: #1d1d1f;
  --color-text-secondary: #86868b;
  --color-text-white: #ffffff;
  --color-text-white-muted: rgba(255, 255, 255, 0.9);
  
  /* === ФОНОВЫЕ ЦВЕТА === */
  --color-background-white: #ffffff;
  --color-background-light: #f5f5f7;
  --color-background-very-light: #f0f8ff;
  --color-background-overlay: rgba(0, 0, 0, 0.8);
  --color-background-glass: rgba(255, 255, 255, 0.15);
  --color-background-glass-hover: rgba(255, 255, 255, 0.25);
  
  /* === ГРАНИЦЫ === */
  --color-border-light: #e5e5e7;
  --color-border-primary: var(--color-primary);
  --color-border-glass: rgba(255, 255, 255, 0.3);
  
  /* === СОСТОЯНИЯ === */
  /* Успех */
  --color-success: #4caf50;
  --color-success-bg: #e8f5e8;
  --color-success-text: #2e7d32;
  
  /* Ошибка */
  --color-error: #f44336;
  --color-error-bg: #ffebee;
  --color-error-text: #c62828;
  
  /* Предупреждение */
  --color-warning: #f39c12;
  --color-warning-hover: #e67e22;
  --color-warning-bg: #fff3cd;
  --color-warning-border: #ffeaa7;
  --color-warning-text: #856404;
  --color-warning-shadow: rgba(243, 156, 18, 0.3);
  
  /* Отключенное состояние */
  --color-disabled: #d1d1d6;
  
  /* === ТЕНИ === */
  --shadow-light: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-medium: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-large: 0 8px 20px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.1);
  --shadow-xxl: 0 25px 50px rgba(0,0,0,0.15);
  --shadow-primary: 0 4px 12px var(--color-primary-shadow);
  --shadow-primary-hover: 0 6px 16px var(--color-primary-shadow-hover);
  --shadow-version: 0 2px 8px rgba(0, 0, 0, 0.3);
  
  /* === РАДИУСЫ === */
  --radius-small: 6px;
  --radius-medium: 8px;
  --radius-large: 12px;
  --radius-xl: 16px;
  --radius-xxl: 20px;
  --radius-app-icon: 18px;
  
  /* === ОТСТУПЫ === */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  --spacing-xxxl: 32px;
  --spacing-xxxxl: 40px;
  
  /* === ШРИФТЫ === */
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  
  /* === РАЗМЕРЫ ШРИФТОВ === */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 20px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-xxxl: 24px;
  --font-size-xxxxl: 28px;
  --font-size-xxxxxl: 32px;
  
  /* === ВЕСА ШРИФТОВ === */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* === ПЕРЕХОДЫ === */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  
  /* === Z-ИНДЕКСЫ === */
  --z-version: 9999;
}

/* ========================================
   УТИЛИТАРНЫЕ КЛАССЫ
   ======================================== */

/* Шрифты */
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }
.font-mono { font-family: var(--font-mono); }

/* Цвета текста */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-white { color: var(--color-text-white); }
.text-white-muted { color: var(--color-text-white-muted); }

/* Фоновые цвета */
.bg-white { background-color: var(--color-background-white); }
.bg-light { background-color: var(--color-background-light); }
.bg-very-light { background-color: var(--color-background-very-light); }
.bg-primary { background-color: var(--color-primary); }
.bg-primary-light { background-color: var(--color-primary-light); }

/* Границы */
.border-light { border-color: var(--color-border-light); }
.border-primary { border-color: var(--color-border-primary); }

/* Состояния */
.error { 
  background-color: var(--color-error-bg); 
  color: var(--color-error-text); 
}
.success { 
  background-color: var(--color-success-bg); 
  color: var(--color-success-text); 
}
.warning { 
  background-color: var(--color-warning-bg); 
  color: var(--color-warning-text); 
  border-color: var(--color-warning-border); 
}

/* Кнопки */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border: none;
  transition: var(--transition-fast);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary-hover);
}

.btn-secondary {
  background-color: var(--color-background-glass);
  color: var(--color-text-white);
  border: 1px solid var(--color-border-glass);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background-color: var(--color-background-glass-hover);
  transform: translateY(-1px);
}

.btn-admin {
  background-color: var(--color-warning);
  color: var(--color-text-white);
  border: none;
  transition: var(--transition-fast);
  font-weight: var(--font-weight-semibold);
}

.btn-admin:hover {
  background-color: var(--color-warning-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--color-warning-shadow);
}

/* Карточки */
.card {
  background-color: var(--color-background-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-large);
}

/* Формы */
.form-input {
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-large);
  transition: border-color var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Версия лейбл */
.version-label {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  background-color: var(--color-background-overlay);
  color: var(--color-text-white);
  padding: var(--spacing-sm) 10px;
  border-radius: var(--radius-small);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  z-index: var(--z-version);
  pointer-events: none;
  box-shadow: var(--shadow-version);
}