/**
 * Дизайн-токены дизайн-системы
 * 
 * Этот файл содержит все основные переменные дизайн-системы:
 * - Цвета (основные, статусные, нейтральные)
 * - Типографика (размеры, веса, семейства шрифтов)
 * - Отступы (gap, padding, margin)
 * - Радиусы скругления
 * - Тени и эффекты
 * - Анимации и переходы
 */

:root {
  /* ===== ЦВЕТА ===== */
  
  /* Основные цвета */
  --color-white: rgb(255, 255, 255);
  --color-black: rgb(0, 0, 0);
  --color-primary-orange: rgb(255, 132, 0);
  --color-primary-orange-light: rgb(255, 195, 0);
  --color-primary-orange-variant: rgb(240, 127, 0);
  --color-secondary-blue: rgb(52, 180, 255);
  --color-social-blue: rgb(0, 119, 254);
  
  /* Дополнительные цвета */
  --color-orange-light: rgb(255, 153, 0);
  --color-yellow-light: rgb(255, 204, 0);
  --color-blue-light: rgb(102, 204, 255);
  --color-green-light: rgb(153, 204, 51);
  --color-blue-secondary: rgb(65, 162, 219);
  --color-green-secondary: rgb(71, 177, 107);
  
  /* Статусные цвета */
  --color-error: rgb(236, 74, 129);
  --color-success: rgb(59, 190, 104);
  --color-success-dark: rgb(42, 185, 91);
  --color-warning: rgb(255, 132, 0);
  --color-info: rgb(52, 180, 255);
  
  /* Нейтральные цвета */
  --color-gray-light: rgb(244, 244, 244);
  --color-gray-medium: rgb(217, 217, 217);
  --color-gray-dark: rgb(135, 135, 135);
  --color-gray-darker: rgb(32, 32, 32);
  --color-gray-lightest: rgb(232, 232, 232);
  
  /* Поверхности и фоны */
  --color-surface-blue: rgb(232, 250, 253);
  --color-surface-alt: rgb(244, 244, 244);
  --color-surface-light-blue: rgb(240, 250, 254);
  
  /* RGB версии для прозрачности */
  --color-primary-orange-rgb: 255, 132, 0;
  --color-secondary-blue-rgb: 52, 180, 255;
  --color-black-rgb: 0, 0, 0;
  --color-white-rgb: 255, 255, 255;
  --color-gray-dark-rgb: 135, 135, 135;
  
  /* ===== ТИПОГРАФИКА ===== */
  
  /* Семейства шрифтов */
  --font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-secondary: "Arial", sans-serif;
  
  /* Размеры шрифтов */
  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-36: 36px;
  --font-size-40: 40px;
  --font-size-42: 42px;
  --font-size-48: 48px;
  
  /* Веса шрифтов */
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-800: 800;
  
  /* Высота строк */
  --line-height-tight: 1;
  --line-height-snug: 1.1;
  --line-height-normal: 1.2;
  --line-height-relaxed: 1.4;
  --line-height-loose: 1.6;
  
  /* ===== ОТСТУПЫ ===== */
  
  /* Базовые отступы */
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-41: 41px;
  --spacing-64: 64px;
  --spacing-78: 78px;
  --spacing-79: 79px;
  --spacing-87: 87px;
  
  /* ===== РАДИУСЫ СКРУГЛЕНИЯ ===== */
  
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-60: 60px;
  --radius-full: 9999px;
  
  /* ===== ТЕНИ ===== */
  
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-base: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  
  /* ===== АНИМАЦИИ И ПЕРЕХОДЫ ===== */
  
  /* Длительность */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;
  
  /* Функции сглаживания */
  --ease-linear: linear;
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Готовые переходы */
  --transition-fast: all var(--duration-fast) var(--ease-smooth);
  --transition-normal: all var(--duration-normal) var(--ease-smooth);
  --transition-slow: all var(--duration-slow) var(--ease-smooth);
  --transition-colors: color var(--duration-normal) var(--ease-smooth);
  --transition-transform: transform var(--duration-normal) var(--ease-smooth);
  
  /* ===== РАЗМЕРЫ ЭЛЕМЕНТОВ ===== */
  
  /* Размеры аватаров */
  --size-avatar-sm: 32px;
  --size-avatar-base: 40px;
  --size-avatar-lg: 48px;
  --size-avatar-xl: 56px;
  --size-avatar-2xl: 64px;
  --size-avatar-3xl: 80px;
  --size-avatar-4xl: 96px;
  --size-avatar-5xl: 120px;
  
  /* Размеры иконок */
  --size-icon-sm: 16px;
  --size-icon-base: 20px;
  --size-icon-lg: 24px;
  --size-icon-xl: 32px;
  
  /* ===== Z-INDEX ===== */
  
  --z-dropdown: 100;
  --z-modal: 200;
  --z-tooltip: 300;
  --z-notification: 400;
  
  /* ===== LAYOUT ===== */
  
  --container-max-width: 1440px;
}