/* ============================================================================
   Дель Кам — дизайн-токены.
   Единственный источник правды: design-system/del-kam-design-standard.md §1.
   Значения копируются буквально. Подбирать «похожее» запрещено.
   Любой новый токен сначала появляется в стандарте, потом здесь.
   ========================================================================== */

:root {
  /* --- Цвет (§1.1) ------------------------------------------------------ */
  --blue: #6BBDFD;   /* основной: фоны, плашки, кнопки, границы активного состояния */
  --cyan: #00B8EE;   /* акцент: знак, ромбы, ссылки, eyebrow                        */
  --navy: #00457B;   /* контраст: тёмные секции, цифры, цены                        */
  --ink: #0E2A3D;    /* заголовки                                                   */
  --body: #4A6478;   /* основной текст                                              */
  --muted: #7D94A5;  /* подписи, meta, дисклеймеры                                  */
  --line: #E4EEF7;   /* линии, рамки карточек                                       */
  --tint: #EBF5FE;   /* фон секции, карточки отзывов                                */
  --air: #F4FAFF;    /* фон секции, вложенные плашки                                */
  --star: #FFB020;   /* ТОЛЬКО звёзды рейтинга. Расширение вне брендбука, [TBD]     */
  --accent: #FF6E24;      /* акцентные кнопки. Решение владельца 01.08.2026.        */
  --accent-hover: #E85C15; /* то же на наведении, на два шага темнее                 */

  /* Градиент плашки цены/CTA (§1.4) */
  --grad-cta: linear-gradient(135deg, var(--blue) 0%, #A6D9FE 100%);

  /* --- Форма (§1.3) ----------------------------------------------------- */
  --r-md: 16px;    /* мелкие карточки  */
  --r-lg: 20px;    /* карточки контента */
  --r-xl: 28px;    /* крупные панели    */
  --r-pill: 999px; /* кнопки, чипы, аватары */

  /* --- Тени (§1.3). Только синие, чёрных в системе нет ------------------ */
  --sh1: 0 6px 18px rgba(0,60,110,.06);   /* покой                    */
  --sh2: 0 18px 44px rgba(0,60,110,.12);  /* hover / поднятая панель  */

  /* --- Раскладка (§1.3) ------------------------------------------------- */
  --max: 1200px;
  --gutter: 20px;         /* боковой отступ desktop */
  --gutter-mobile: 16px;  /* боковой отступ mobile  */
  --section-y: 72px;      /* вертикальный padding секции, desktop */
  --section-y-mobile: 48px;
  --grid-gap: 24px;

  /* Шкала отступов, кратна 4 */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-18: 72px; --sp-24: 96px;

  /* --- Движение (§1.3) -------------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 200ms;

  /* --- Типографика (§1.2) ---------------------------------------------- */
  /* Montserrat — только заголовки, цифры и кнопки.                         */
  /* Golos Text — всё, что читают абзацами. Обратного не бывает.            */
  --font-head: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Golos Text', 'Helvetica Neue', Arial, sans-serif;

  --fz-h1: clamp(34px, 5vw, 56px);
  --fz-h2: clamp(28px, 3.6vw, 42px);
  --fz-sub: clamp(17px, 2vw, 22px);
  --fz-eyebrow: 12px;
  --fz-h3: 20px;
  --fz-body: 16px;
  --fz-meta: 13px;
  --fz-btn: 14px;

  --lh-h1: 1.05;
  --lh-h2: 1.08;
  --lh-sub: 1.35;
  --lh-h3: 1.25;
  --lh-body: 1.6;

  --tracking-h1: -.01em;
  --tracking-eyebrow: .26em;
}

/* Брейкпоинты проекта (как в Tilda): 1200 · 960 · 640 · 480.
   Переменные под мобильную раскладку переопределяются на 640. */
@media (max-width: 640px) {
  :root {
    --gutter: var(--gutter-mobile);
    --section-y: var(--section-y-mobile);
  }
}

/* Пользователь попросил меньше движения — уважаем. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}