:root {
  /* Цвета */
  --color-primary: #FF8C00;
  --color-primary-rgb: 255, 140, 0;
  --color-primary-hover: #E67E00;
  --color-primary-hover-rgb: 230, 126, 0;
  --color-secondary: #298D73;
  --color-secondary-rgb: 41, 141, 115;
  --color-info: #66A9E5;
  --color-info-rgb: 102, 169, 229;
  --color-warning: #EA982C;
  --color-warning-rgb: 234, 152, 44;
  --color-error: #E8514E;
  --color-error-rgb: 232, 81, 78;
  --color-success: #28A46F;
  --color-success-rgb: 40, 164, 111;
  --color-success-hover: #1E8057;
  --color-surface0: #FFFFFF;
  --color-surface1: #EAEEF3;
  --color-text-high: #1A1A1A;
  --color-text-medium: #717171;
  --color-text-low: #4A4A4A;
  --color-text-disabled: #9EA3AF;
  
  /* Переменные для совместимости (используются в компонентах) */
  --surface0: var(--color-surface0);
  --surface1: var(--color-surface1);
  --text-high: var(--color-text-high);
  --text-medium: var(--color-text-medium);
  --text-low: var(--color-text-low);
  
  /* Цвета для статусов */
  --color-primary-light: rgba(255, 140, 0, 0.15);
  --color-primary-dark: #FF8C00;
  --color-secondary-light: rgba(41, 141, 115, 0.15);
  --color-secondary-dark: #298D73;
  --color-info-light: rgba(102, 169, 229, 0.15);
  --color-info-dark: #66A9E5;
  --color-warning-light: rgba(234, 152, 44, 0.15);
  --color-warning-dark: #EA982C;
  --color-success-light: rgba(40, 164, 111, 0.15);
  --color-success-dark: #28A46F;
  --color-danger-light: rgba(232, 81, 78, 0.15);
  --color-danger-dark: #E8514E;
  --color-accent-light: rgba(161, 102, 229, 0.15);
  --color-accent-dark: #A166E5;
  --color-bg-secondary: rgba(0, 0, 0, 0.05);
  
  /* Цвета статусов транскрипта */
  --status-waiting-bg: var(--color-info-light);
  --status-waiting-text: var(--color-info-dark);
  --status-queued-bg: var(--color-warning-light);
  --status-queued-text: var(--color-warning-dark);
  --status-processing-bg: var(--color-primary-light);
  --status-processing-text: var(--color-primary-dark);
  --status-completed-bg: var(--color-success-light);
  --status-completed-text: var(--color-success-dark);
  --status-error-bg: var(--color-danger-light);
  --status-error-text: var(--color-danger-dark);
  --danger-color: var(--color-error);
  --danger-hover-bg: var(--color-danger-light);

  /* Цвета для стилей Wave to Words */
  --queued-color: #ff8c00;
  --queued-color-rgb: 255, 140, 0;
  --processing-color: #e6b800;
  --processing-color-rgb: 230, 184, 0;
  --completed-color: #52c41a;
  --completed-color-rgb: 82, 196, 26;
  --error-color: #f5222d;
  --error-color-rgb: 245, 34, 45;
  --waiting-color: #1890ff;
  --waiting-color-rgb: 24, 144, 255;
  --uploading-color: #722ed1;
  --uploading-color-rgb: 114, 46, 209;
  --highlight-color: #ff9900;
  --highlight-color-rgb: 255, 153, 0;
  
  /* Радиусы */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  
  /* Тени */
  --elevation-4: 0 1px 2px rgba(0, 0, 0, 0.05);
  --elevation-8: 0 2px 4px rgba(0, 0, 0, 0.08);
  --elevation-12: 0 4px 6px rgba(0, 0, 0, 0.1);
  --elevation-16: 0 6px 10px rgba(0, 0, 0, 0.12);
  --elevation-24: 0 8px 16px rgba(0, 0, 0, 0.15);
  
  /* Отступы */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 40px;
  --spacing-8: 48px;
  --spacing-9: 64px;
  
  /* Цвета темы */
  --card-bg: var(--color-surface0);
  --border-color: #D2D6DB;
  --border-color-light: rgba(210, 214, 219, 0.5);
  
  /* Анимации и переходы */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;
  
  /* Типографика */
  --font-size-xs: 0.75rem;
  --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;
  --font-size-4xl: 2.25rem;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
} 