/* CSS переменные для оптимизации */
:root {
  /* Цвета */
  --color-primary: #367cff;
  --color-primary-hover: #2a5ecb;
  --color-success: #43d97b;
  --color-success-hover: #2ecc71;
  --color-warning: #ff7a00;
  --color-error: #ff6b6b;
  --color-error-hover: #ff5252;
  --color-background: #4a4a4a;
  --color-background-light: #f9f9f9;
  --color-text: #212121;
  --color-text-light: #ffffff;
  --color-border: #666;
  --color-shadow: rgba(0, 0, 0, 0.1);
  
  /* Размеры */
  --border-radius: 8px;
  --border-radius-large: 16px;
  --border-radius-button: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  
  /* Размеры кнопок */
  --button-padding: 9px 28px;
  --button-padding-sm: 6px 20px;
  --button-padding-xs: 6px 12px;
  --button-min-width: 64px;
  --button-min-width-sm: 50px;
  --button-min-width-xs: 45px;
  --button-height: 40px;
  
  /* Шрифты */
  --font-size-button: clamp(1rem, 4vw, 1.2rem);
  --font-size-button-sm: clamp(0.9rem, 4vw, 1rem);
  --font-size-button-xs: clamp(0.8rem, 3vw, 0.9rem);
  --font-weight-bold: 600;
  --font-weight-bolder: 700;
  --font-weight-boldest: 900;
  
  /* Переходы */
  --transition-fast: background 0.12s;
  --transition-normal: all 0.3s ease;
  --transition-slow: all 0.5s ease;
  
  /* Тени */
  --shadow-small: 0 2px 4px var(--color-shadow);
  --shadow-medium: 0 4px 8px var(--color-shadow);
  --shadow-large: 0 8px 16px var(--color-shadow);
  --shadow-player: 0 -4px 20px rgba(54, 124, 255, 0.3);
  
  /* Touch взаимодействия */
  --touch-feedback-duration: 150ms;
  --swipe-threshold: 50px;
}