/**
 * ==========================================================================
 * MPSET.pro — CSS Tokens (01-tokens.css)
 * ==========================================================================
 * Это ЕДИНСТВЕННОЕ место для изменения корпоративного стиля.
 * Изменили здесь → обновилось во всём проекте.
 * 
 * СТРУКТУРА ФАЙЛА:
 * 1. Брендовые цвета (сохраняем ВСЕ, включая -dark вариации)
 * 2. Градиенты (используют брендовые цвета)
 * 3. Статусы (успех, предупреждение, ошибка, информация)
 * 4. Нейтральные цвета (GRAY SCALE — 10 уровней)
 * 5. Фон / границы / текст (семантические переменные)
 * 6. Отступы (4px grid — масштабируемая система)
 * 7. Скругления (border-radius)
 * 8. Тени (box-shadow — глубина интерфейса)
 * 9. Переходы и анимации (timing functions)
 * 10. Брейкпоинты (для JS/media queries)
 * 11. Макет (глобальные размеры)
 * 12. Шрифты (типографика)
 * 
 * ВАЖНО:
 * - Не создавайте новые переменные в других файлах
 * - Все цвета только через переменные (никаких #005BFF в коде)
 * - Изменение бренда = правка только этого файла
 * ==========================================================================
 */

:root {
  /* ==========================================================================
     1. БРЕНДОВЫЕ ЦВЕТА (полный набор — не удалять!)
     ========================================================================== */
  
  /* Ozon — основной синий */
  --ozon-blue: #005BFF;
  --ozon-dark: #0046cc;      /* ← Тёмный вариант для ховеров/градиентов */
  
  /* Wildberries — фиолетовый */
  --wb-purple: #9B36CF;
  --wb-dark: #7100B1;        /* ← Тёмный вариант для ховеров/градиентов */
  --wb-pink: #FF00A3;        /* ← Акцентный розовый */
  
  /* ==========================================================================
     2. ГРАДИЕНТЫ (используют брендовые цвета)
     ========================================================================== */
  
  /* Основной градиент: 70% синий → 30% фиолетовый (как в утверждённом дизайне) */
  --gradient-primary: linear-gradient(
    135deg,
    var(--ozon-blue) 0%, 
    var(--wb-purple) 70%, 
    var(--wb-pink) 100%
  );
  
  /* Ozon-градиент (только синие тона) */
  --gradient-ozon: linear-gradient(
    135deg,
    var(--ozon-blue) 0%,
    var(--ozon-dark) 100%
  );
  
  /* WB-градиент (только фиолетовые тона) */
  --gradient-wb: linear-gradient(
    135deg,
    var(--wb-purple) 0%,
    var(--wb-dark) 100%
  );
  
  /* Успешный градиент (для бейджей, иконок) */
  --gradient-success: linear-gradient(
    135deg,
    var(--success),
    #059669
  );
  
  /* ==========================================================================
     3. СТАТУСЫ (для уведомлений, бейджей, индикаторов)
     ========================================================================== */
  
  --success: #10B981;   /* Зелёный — успех, завершено */
  --warning: #F59E0B;   /* Оранжевый — предупреждение, в процессе */
  --danger: #EF4444;    /* Красный — ошибка, требует внимания */
  --info: #3B82F6;      /* Синий — информация, нейтрально */
  
  /* ==========================================================================
     4. НЕЙТРАЛЬНЫЕ ЦВЕТА (GRAY SCALE — 10 уровней)
     ========================================================================== */
  
  --gray-50: #F9FAFB;   /* Очень светлый — фон инпутов */
  --gray-100: #F3F4F6;  /* Светлый — фон страницы */
  --gray-200: #E5E7EB;  /* Границы по умолчанию */
  --gray-300: #D1D5DB;  /* Границы при ховере */
  --gray-400: #9CA3AF;  /* Вторичный текст */
  --gray-500: #6B7280;  /* Основной вторичный текст */
  --gray-600: #4B5563;  /* Основной текст (вторичный) */
  --gray-700: #374151;  /* Основной текст */
  --gray-800: #1F2937;  /* Тёмный текст */
  --gray-900: #111827;  /* Самый тёмный — заголовки */
  
  /* ==========================================================================
     5. ФОН / ГРАНИЦЫ / ТЕКСТ (семантические переменные)
     ========================================================================== */
  
  /* Фон */
  --bg-page: var(--gray-100);    /* Фон всей страницы */
  --bg-card: #ffffff;            /* Фон карточек, модалок */
  --bg-input: var(--gray-50);    /* Фон полей ввода */
  
  /* Границы */
  --border-color: var(--gray-200);  /* Цвет границ по умолчанию */
  --border-focus: var(--ozon-blue); /* Цвет границ при фокусе */
  
  /* Текст */
  --text-primary: var(--gray-900);   /* Основной цвет текста */
  --text-secondary: var(--gray-600); /* Вторичный текст */
  --text-muted: var(--gray-500);     /* Приглушённый текст */
  --text-inverse: #ffffff;           /* Текст на тёмном фоне */
  
  /* ==========================================================================
     6. ОТСТУПЫ (4px GRID — масштабируемая система)
     ========================================================================== */
  
  --space-1: 4px;    /* Микро-отступы */
  --space-2: 8px;    /* Маленькие отступы */
  --space-3: 12px;   /* Средние-малые */
  --space-4: 16px;   /* Стандартный отступ */
  --space-5: 20px;   /* Средние-большие */
  --space-6: 24px;   /* Большие отступы */
  --space-8: 32px;   /* Очень большие */
  --space-10: 40px;  /* Секционные отступы */
  --space-12: 48px;  /* Крупные секции */
  --space-16: 64px;  /* Максимальные отступы */
  
  /* ==========================================================================
     7. СКРУГЛЕНИЯ (border-radius)
     ========================================================================== */
  
  --radius-sm: 8px;     /* Маленькие скругления — кнопки, инпуты */
  --radius-md: 12px;    /* Стандарт — карточки */
  --radius-lg: 16px;    /* Крупные — модалки */
  --radius-xl: 20px;    /* Очень крупные — приветственные блоки */
  --radius-full: 9999px;/* Полное скругление — бейджи, аватары */
  
  /* ==========================================================================
     8. ТЕНИ (box-shadow — глубина интерфейса)
     ========================================================================== */
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);   /* Лёгкая — инпуты */
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);   /* Средняя — карточки */
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);  /* Крупная — ховер */
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15); /* Очень крупная — модалки */
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);/* Максимальная — драг-н-дроп */
  
  /* ==========================================================================
     9. ПЕРЕХОДЫ И АНИМАЦИИ (timing functions)
     ========================================================================== */
  
  --transition-fast: 0.15s ease;   /* Быстрые ховеры */
  --transition-base: 0.3s ease;    /* Стандартные переходы */
  --transition-slow: 0.5s ease;    /* Плавные появления */
  
  /* ==========================================================================
     10. БРЕЙКПОИНТЫ (для JS/media queries)
     ========================================================================== */
  
  --bp-sm: 480px;   /* Мобильные (портрет) */
  --bp-md: 768px;   /* Планшеты */
  --bp-lg: 1024px;  /* Маленькие десктопы */
  --bp-xl: 1280px;  /* Стандартные десктопы */
  --bp-2xl: 1536px; /* Большие экраны */
  
  /* ==========================================================================
     11. МАКЕТ (глобальные размеры)
     ========================================================================== */
  
  --sidebar-width: 260px;    /* Ширина сайдбара */
  --header-height: 64px;     /* Высота хедера */
  --container-max: 1200px;   /* Макс. ширина контейнера */
  
  /* ==========================================================================
     12. ШРИФТЫ (типографика — добавлено из оригинальной системы)
     ========================================================================== */
  
  /* Основной шрифт — как в оригинальном дизайне */
  --font-family-base: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-family-heading: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  
  /* Базовые размеры шрифтов */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  
  /* Начертания */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Паттерн для брендинга (декоративный фон) */
  --pattern-dots: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Глобальное применение шрифта */
* {
  font-family: var(--font-family-base);
}