/* ============================================================
   Design Tokens — Отель «Марьино» (Marino Hotel Anapa)
   Iter 1. Основано на ТЗ v1.
   Подключается ДО остальных CSS шаблона (через addCss).
   Использует префикс --ds-* чтобы не конфликтовать с
   существующими переменными в template_styles.css.
   ============================================================ */

:root {
  /* ---------- Палитра ---------- */
  --ds-color-bg:           #FFFFFF;
  --ds-color-bg-muted:     #F1F1F1;   /* подложка */
  --ds-color-bg-tag:       #EBFEC4;   /* подложка тегов */
  --ds-color-cta:          #2B7540;   /* основная CTA */
  --ds-color-cta-hover:    #142D1A;   /* CTA hover */
  --ds-color-text:         #4A4A4A;   /* основной текст */
  --ds-color-text-invert:  #F1F1F1;   /* текст на тёмном */
  --ds-color-heading:      #050505;   /* заголовки */
  --ds-color-heading-invert: #FFFFFF; /* заголовки на тёмном */
  --ds-color-link:         #142D1A;   /* кнопка-ссылка */
  --ds-color-link-hover:   #050505;   /* кнопка-ссылка hover */

  /* ---------- Шрифты (новые, из ТЗ) ---------- */
  --ds-font-heading:       'Manrope', sans-serif;
  --ds-font-body:          'Inter',   sans-serif;

  /* ---------- Размеры шрифтов: web (≥769px) ---------- */
  --ds-fs-h1:              40px;
  --ds-fs-h2:              40px;
  --ds-fs-h3:              40px;
  --ds-fs-h4:              20px;   /* в ТЗ явно меньше для подзаголовков номеров */
  --ds-fs-body:            18px;
  --ds-fs-tag:             16px;
  --ds-fs-button:          18px;

  /* ---------- Размеры шрифтов: mobile (≤768px) ---------- */
  --ds-fs-h1-mob:          24px;
  --ds-fs-h2-mob:          24px;
  --ds-fs-h3-mob:          24px;
  --ds-fs-h4-mob:          18px;
  --ds-fs-body-mob:        16px;
  --ds-fs-tag-mob:         14px;
  --ds-fs-button-mob:      16px;

  /* ---------- Веса шрифтов ---------- */
  --ds-fw-heading:         800;   /* Manrope ExtraBold */
  --ds-fw-body:            400;   /* Inter Regular */
  --ds-fw-button:          500;   /* Inter Medium */
  --ds-fw-tag:             400;   /* Inter Regular */

  /* ---------- Скругления ---------- */
  --ds-radius-card:        15px;
  --ds-radius-pill:        999px; /* капсула для кнопок/тегов */

  /* ---------- Отступы (внешние между блоками) ---------- */
  --ds-gap-section:        120px;  /* web */
  --ds-gap-section-mob:    60px;   /* mobile */

  /* ---------- Отступы (внутренние между контентом блока) ---------- */
  --ds-gap-block:          60px;   /* web */
  --ds-gap-block-mob:      30px;   /* mobile */

  /* ---------- Отступы между карточками ---------- */
  --ds-gap-card:           20px;

  /* ---------- Внутренние отступы карточек ---------- */
  --ds-pad-card:           32px;   /* web */
  --ds-pad-card-mob:       20px;   /* mobile */

  /* ---------- Кнопки и теги ---------- */
  --ds-pad-cta:            12px 24px;
  --ds-pad-tag:            6px 14px;

  /* ---------- Layout ---------- */
  --ds-container-max:      1320px;   /* max-width контейнера, как в шапке/подвале */
  --ds-radius-card:        24px;      /* скругление карточек */
}

/* ============================================================
   Базовое применение токенов к body.
   Это минимально видимая часть iter 1 — основной текст
   переключается на Inter, цвет берётся из палитры.
   Заголовки пока на легаси-шрифте (Forum) — сменим в iter 2
   вместе с пересборкой header/footer.
   ============================================================ */

body {
  font-family: var(--ds-font-body);
  font-weight: var(--ds-fw-body);
  font-size: var(--ds-fs-body);
  line-height: 1.5;
  color: var(--ds-color-text);
  background-color: var(--ds-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* На мобиле базовый шрифт по ТЗ — 16px */
@media (max-width: 768px) {
  body {
    font-size: var(--ds-fs-body-mob);
  }
}