/* ===== ПЕРЕМЕННЫЕ ===== */
:root {
  /* Цвета */
  --color-primary: #0000ff;
  --color-primary-dark: #0000d6;
  --color-primary-light: #eef2ff;
  
  --color-text: #1b1f24;
  --color-text-secondary: #646b75;
  --color-text-muted: #9ca3b0;
  
  --color-bg: #ffffff;
  --color-bg-secondary: #f6f7f9;
  --color-bg-tertiary: #f8fafc;
  
  --color-border: #e5e7eb;
  --color-border-light: #eef2ff;
  
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  
  /* Размеры */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  
  /* Анимации */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  
  /* Отступы */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Safe area (вырезы, home indicator, панель браузера) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --mobile-bottom-ui: calc(var(--safe-bottom) + 12px);
}