/**
 * CRM Design System - CSS Variables
 * Глобальные переменные дизайна для консистентности во всем приложении
 */

:root {
  /* Типография */
  --font-sans: Inter, Arial, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 15px;
  --font-size-2xl: 18px;
  --font-size-3xl: 22px;

  /* Цвета текста */
  --color-text-primary: #1f2937;
  --color-text-secondary: #6b7280;

  /* Цвета фона */
  --color-background-primary: #ffffff;
  --color-background-secondary: #f8fafc;
  --color-background-tertiary: #f3f4f6;
  --color-background-body: #efecfb;

  /* Цвета границ */
  --color-border-secondary: #d1d5db;
  --color-border-tertiary: #e5e7eb;

  /* Основные цвета — фиолетовая палитра в стиле референса */
  --color-primary: #6f5cf2;
  --color-primary-dark: #5a46e0;
  --color-primary-light: #ede9fe;
  --color-info: #2563eb;
  --color-info-light: #dbeafe;
  --color-success: #16a34a;
  --color-success-light: #dcfce7;
  --color-warning: #d97706;
  --color-warning-light: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-light: #fee2e2;
  --color-purple: #7c3aed;
  --color-purple-light: #f3e8ff;

  /* Тени — мягкие, с фиолетовым оттенком, для эффекта "парящих" карточек */
  --shadow-card: 0 2px 10px rgba(76, 60, 140, 0.06), 0 1px 3px rgba(76, 60, 140, 0.05);
  --shadow-card-hover: 0 10px 28px rgba(111, 92, 242, 0.16);
  --shadow-app: 0 16px 48px rgba(76, 60, 140, 0.12);
  --shadow-glow-primary: 0 4px 14px rgba(111, 92, 242, 0.35);
  --color-hover-tint: rgba(111, 92, 242, 0.06);

  /* Радиусы скругления */
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 18px;
  --border-radius-full: 50%;

  /* Темная боковая панель */
  --sidebar-bg: #1c2333;
  --sidebar-width: 56px;

  /* Высота компонентов */
  --topbar-height: 52px;

  /* Переходы и анимации */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
}

html, body {
  min-height: 100%;
  background: var(--color-background-body);
  padding: 16px;
}