/* ============================================================
   База проекта — сайт санатория «Славяновский исток».
   Токены берём из РЕАЛЬНОЙ бренд-ДС (папка
   design-system/Славяновский исток — Design System), а не из
   старт-китового заглушечного tokens.css.
   Шрифт — Manrope (по прототипу, согласовано).
   Хардкод значений запрещён: в блоках используем только токены.
   ============================================================ */

/* 1. Шрифт — Manrope (как в прототипе). @import должны идти первыми. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");
/* 2. Токены бренд-ДС — локальная копия styles/ds.css (плоский импорт).
      Прямой @import оригинала (path с кириллицей/пробелами, вложенный
      styles.css → tokens/*) по file:// нестабилен; см. шапку ds.css. */
@import url("./ds.css");

/* --- Переопределяем ТОЛЬКО шрифтовые токены на Manrope.
       Цвета, отступы, радиусы, тени, motion остаются из ДС. --- */
:root {
  --font-display: "Manrope", system-ui, sans-serif;
  --font-sans:    "Manrope", system-ui, sans-serif;
  --font-heading: var(--font-display);
  --font-body:    var(--font-sans);
  --font-ui:      var(--font-sans);
}

/* --- Проектные расширения токенов.
       В бренд-ДС нет токенов тёмных поверхностей, а они нужны для
       утилити-бара, секции «Номера», CTA-блока и футера. Заводим их
       здесь, опираясь на существующие значения ДС (не хардкод). --- */
:root {
  --surface-dark:     var(--ink-900);  /* тёмная плашка/секция */
  --text-on-dark:     var(--white);
  --text-on-dark-dim: color-mix(in srgb, var(--white) 82%, transparent);

  /* Ширина контейнера расширена с 1200 до 1280: контент шапки
     (лого + меню + контакты + CTA) не помещался в 1200 и переполнял. */
  --container: 1280px;
}

/* --- Сброс (поверх базы ДС) --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--surface-page);
  color: var(--text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* --- Контейнер: центрируем контент, ширина и боковые поля из токенов --- */
.container {
  max-width: var(--container);   /* 1200px */
  margin-inline: auto;
  padding-inline: var(--space-8); /* 32px */
}

@media (max-width: 640px) {
  .container { padding-inline: var(--space-4); } /* 16px */
}