/**
 * VoronkaClub — Design Tokens (тестовая версия).
 *
 * Единый источник истины для дизайн-системы: цвета, типографика, размеры,
 * сетка, скругления, тени, анимации. Все компоненты используют эти переменные.
 *
 * Принципы: премиальность, простота, атмосфера экспедиции, спокойная уверенность.
 * Без кислотных цветов, без визуального шума, акцент — не более 10–15%.
 */

:root {
  /* ===== Цвета: бренд (сине-индиговая палитра из референса dc-2) =====
     Имена токенов сохранены для совместимости (copper = акцент по роли). */
  --vc-indigo: #13131c;          /* Primary — тёмный фон: hero, манифест, форма */
  --vc-indigo-900: #0c0c14;      /* Глубже основного — footer, текст на кнопке */
  --vc-copper: #5b63e6;          /* Accent — кнопки, бейджи, иконки, ссылки (≤15%) */
  --vc-copper-light: #9aa0f5;    /* Светлый акцент — надзаголовки на тёмном фоне */
  --vc-copper-dark: #4a51c4;     /* Тёмный акцент — ссылки «Подробнее» на светлом фоне */

  /* ===== Цвета: поверхности ===== */
  --vc-bg: #eef0f6;              /* Светло-сиреневый — основной фон сайта */
  --vc-surface: #ffffff;         /* Карточки */

  /* ===== Цвета: текст ===== */
  --vc-text: #1b1c26;            /* Primary text — тёмный сине-серый */
  --vc-text-secondary: #5c5f70;  /* Secondary — даты, подписи */
  --vc-text-muted: #7d8090;      /* Muted */
  --vc-text-on-dark: #f4f5fa;    /* Светлый текст на тёмном фоне */

  /* ===== Цвета: служебные ===== */
  --vc-border: rgba(27, 28, 38, 0.10);
  --vc-border-on-dark: rgba(244, 245, 250, 0.18);
  --vc-copper-hover: #454dc9;    /* Затемнённый акцент для hover кнопок */

  /* ===== Типографика: семейства ===== */
  --vc-font-display: "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vc-font-ui: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ===== Типографика: размеры (desktop) ===== */
  --vc-h1: 60px;
  --vc-h2: 42px;
  --vc-h3: 28px;
  --vc-body-lg: 18px;
  --vc-body: 16px;
  --vc-small: 14px;

  /* Веса */
  --vc-weight-display: 500;
  --vc-weight-medium: 500;
  --vc-weight-semibold: 600;
  --vc-weight-bold: 700;

  /* Межстрочные */
  --vc-lh-display: 0.95;
  --vc-lh-heading: 1.1;
  --vc-lh-body: 1.6;

  /* ===== Сетка (как в референсе) ===== */
  --vc-container: 1440px;        /* внешний контейнер */
  --vc-wide: 1760px;            /* макс. ширина full-width зон — кап для 2K/4K мониторов */
  --vc-content: 1240px;          /* рабочая ширина контентных секций (карточки, footer) */
  --vc-gutter: 44px;             /* боковые отступы от краёв окна (как в референсе) */
  --vc-header-h: 72px;           /* высота фиксированной шапки */

  /* Вертикальные отступы между секциями */
  --vc-section-gap: 120px;       /* desktop */

  /* ===== Скругления ===== */
  --vc-radius-sm: 8px;           /* малые элементы */
  --vc-radius-md: 14px;          /* карточки */
  --vc-radius-lg: 20px;          /* крупные блоки */
  --vc-radius-btn: 3px;          /* кнопки — почти прямые углы (как в референсе) */

  /* ===== Границы (вместо теней — строгий стиль) ===== */
  --vc-hairline: 1px solid var(--vc-border);

  /* ===== Тени — отключены (премиальность строится на пространстве) ===== */
  --vc-shadow: none;
  --vc-shadow-card: none;

  /* ===== Кнопки ===== */
  --vc-btn-height: 56px;

  /* ===== Анимации ===== */
  --vc-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out */
  --vc-dur-fast: 200ms;
  --vc-dur-mid: 350ms;
  --vc-dur-slow: 500ms;
}

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --vc-h1: 48px;
    --vc-section-gap: 88px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  :root {
    --vc-h1: 36px;
    --vc-h2: 30px;
    --vc-h3: 24px;
    --vc-section-gap: 64px;
    --vc-gutter: 20px;
  }
}