/**
 * JV Design Variables
 * Цветовая палитра и переменные для дизайна JV
 */

:root {
  /* ========== Шрифты ========== */
  --jv-font-family: 'TT Norms Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* ========== Цвета ========== */
  
  /* Основные цвета */
  --jv-primary: #E94E1B;
  --jv-primary-hover: #d1410f;
  
  /* Цвета текста */
  /* Аудит 02.09: #999999 на белом даёт контраст 2,85 при норме WCAG AA 4,5 —
     а токен стоит на названиях подкатегорий, крошках, счётчиках, подписях.
     #6b6b6b даёт 5,7. Для иконок и разделителей, где контраст текста не
     требуется, оставлен отдельный --jv-icon-muted с прежним значением. */
  --jv-text-muted: #6b6b6b;
  --jv-icon-muted: #999999;
  --jv-text-primary: #171717;   /* off-black (не чистый #000 — мягче для глаз, taste-аудит) */
  --jv-text-secondary: #303131;
  --jv-text-tertiary: var(--jv-text-muted);   /* алиас: тот же #999999 */
  --jv-text-quaternary: #878787;
  --jv-bg-surface: #F2F3F6;
  --jv-bg-card: #ffffff;

  /* Цвета фона */
  --jv-bg-light: var(--jv-bg-surface);         /* алиас: тот же #F2F3F6 */
  --jv-bg-white: #FFFFFF;

  /* Цвета границ */
  --jv-border: #d9d9d9;
  --jv-accent: var(--jv-primary);              /* алиас бренда: единый источник */
  --jv-border-light: var(--jv-border);         /* алиас: тот же #d9d9d9 */
  --jv-border-active: var(--jv-primary);       /* алиас бренда */
  
  /* ========== Типографика ========== */
  
  /* Размеры шрифтов */
  --jv-font-size-xs: 10px;
  --jv-font-size-sm: 12px;
  --jv-font-size-base: 14px;
  --jv-font-size-md: 15px;
  --jv-font-size-lg: 16px;
  --jv-font-size-xl: 18px;
  --jv-font-size-2xl: 22px;
  --jv-font-size-3xl: 24px;
  --jv-font-size-4xl: 34px;
  --jv-font-size-5xl: 37px;
  --jv-font-size-6xl: 44px;
  
  /* Веса шрифтов */
  --jv-font-weight-normal: 400;
  --jv-font-weight-medium: 450;
  --jv-font-weight-semibold: 500;
  --jv-font-weight-bold: 600;
  --jv-font-weight-extrabold: 700;
  
  /* Высота строки */
  --jv-line-height-tight: 100%;
  --jv-line-height-heading: 1.15;   /* для многострочных заголовков (RU-названия переносятся) */
  --jv-line-height-normal: 120%;
  --jv-line-height-relaxed: 130%;
  
  /* ========== Отступы ========== */
  
  /* Padding */
  --jv-spacing-xs: 5px;
  --jv-spacing-sm: 8px;
  --jv-spacing-md: 10px;
  --jv-spacing-lg: 15px;
  --jv-spacing-xl: 20px;
  --jv-spacing-2xl: 30px;
  --jv-spacing-3xl: 45px;
  
  /* Gap */
  --jv-gap-xs: 5px;
  --jv-gap-sm: 9px;
  --jv-gap-md: 10px;
  --jv-gap-lg: 11px;
  --jv-gap-xl: 14px;
  --jv-gap-2xl: 15px;
  --jv-gap-3xl: 20px;
  
  /* ========== Радиусы скругления ========== */
  --jv-radius-sm: 5px;
  --jv-radius-md: 8px;
  --jv-radius-lg: 10px;
  --jv-radius-xl: 15px;
  --jv-radius-2xl: 16px;
  --jv-radius-3xl: 18px;
  
  /* ========== Тени ========== */
  --jv-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --jv-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --jv-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
  --jv-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.12);
  
  /* ========== Переходы ========== */
  --jv-transition-fast: 0.2s ease;
  --jv-transition-base: 0.3s ease;
  --jv-transition-slow: 0.5s ease;
  --jv-ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* сильный ease-out для интерактива */
  
  /* ========== Размеры контейнера ========== */
  --jv-container-max-width: 1880px;
  --jv-container-padding: 10px;
  
  /* ========== Брейкпоинты (для использования в JS) ========== */
  --jv-breakpoint-mobile: 768px;
  --jv-breakpoint-tablet: 1240px;
  --jv-breakpoint-laptop: 1360px;
  --jv-breakpoint-desktop: 1900px;
}

/* ========== Утилитарные классы для быстрого доступа ========== */

.jv-text-primary { color: var(--jv-text-primary) !important; }
.jv-text-secondary { color: var(--jv-text-secondary) !important; }
.jv-text-tertiary { color: var(--jv-text-tertiary) !important; }

.jv-bg-light { background-color: var(--jv-bg-light) !important; }
.jv-bg-white { background-color: var(--jv-bg-white) !important; }

.jv-border-light { border-color: var(--jv-border-light) !important; }
.jv-border-active { border-color: var(--jv-border-active) !important; }
