/*
  Пожарно-техническая выставка — дизайн-токены
  Источник: pencil-new.pen (переменные документа + цвета, повторяющиеся в макетах без переменной).
  Значения сняты с макетов 1:1 — ничего не округлено и не «улучшено».
*/

:root {
  /* ── Переменные документа (в .pen: $bg, $surface, …) ───────────────────────── */
  --bg: #E4DDD0;           /* фон всех страниц */
  --surface: #D8CBBB;      /* карточки, поля ввода, плашки */
  --accent-soft: #D8CBBB;  /* в макетах = surface */
  --ink: #1B1917;          /* основной текст, тёмная панель шапки */
  --ink-2: #6B6055;        /* второстепенный текст */
  --ink-2-on-surface: #5A5047; /* второстепенный текст мелким кеглем на --surface: у --ink-2 там 3,8 : 1, у этого 4,9 : 1 */
  --line: #C6B8A5;         /* разделители и обводки на светлом */
  --accent: #A15346;       /* кнопки, номера, ссылки «Подробнее», активные элементы */
  --cream: #F7F3EC;        /* текст на тёмном и на акценте, светлые кнопки */
  --brown: #43322A;        /* подвал, тёмные панели и врезки */

  /* ── Цвета, которые в макетах заданы «хексом», но повторяются ─────────────── */
  --chip: #EBE2D7;               /* фон тегов на карточках: «№ 7», «ЗАЛ 1», «42 экспоната», тип материала */
  --muted-on-dark: #A79C8E;      /* подписи на тёмном: «ЦЕНТР ПРОПАГАНДЫ», адрес/подписи в подвале, пояснения */
  --line-on-dark: #FFFFFF1F;     /* разделители и подложки плашек на тёмном */
  --line-on-dark-strong: #FFFFFF29;
  --fill-on-dark: #FFFFFF14;     /* кнопки соцсетей в подвале, подложки иконок/портретов на тёмном */
  --photo-placeholder: #CDBFAE;  /* карточка/обложка без фотографии */
  --camera-bg: #0E0D0C;          /* фон QR-сканера (запрос/отказ доступа) и лайтбокса */
  --overlay-ink-72: #1B1917B8;   /* затемнения и подложки поверх фото (стрелки галереи, подписи) */
  --overlay-ink-40: #1B191766;
  --cream-70: #F7F3ECB3;         /* вводный текст на тёмном фото */
  --cream-60: #F7F3EC99;         /* роль/годы на тёмном */
  --menu-divider: #4A423B;       /* разделители в мобильном меню */
  --text-on-camera: #B9AFA3;     /* пояснения на экранах QR-сканера */
  --hall-panel-text: #CFC4B6;    /* описание в тёмной панели первого экрана зала */
  --hero-hint: #C8BCAE;          /* подсказка под панелью поиска на главной (мобайл) */
  --accent-40: #A1534666;        /* иконка-заглушка в карточке материала без обложки */
  --accent-10: #A153461A;        /* подсветка выбранного пункта в раскрытом списке залов */

  /* ── Шрифты ───────────────────────────────────────────────────────────────── */
  --font-display: "Unbounded", system-ui, sans-serif;  /* заголовки ($font-display) */
  --font-text: "Unbounded", system-ui, sans-serif;     /* весь остальной текст ($font-text) */
  --font-inter: "Inter", system-ui, sans-serif;        /* только подзаголовок первого экрана главной (десктоп), решение заказчика */
  /* Используемые начертания: 300, 400 (normal), 500, 600.
     Размеры в макетах дробные (8.5, 9.5, 12.5, 13.5, 14.5 px …) — переносить как есть. */

  /* ── Радиусы (самые частые) ───────────────────────────────────────────────── */
  --radius-5: 5px;     /* квадратные кнопки шапки 40×40 */
  --radius-6: 6px;     /* теги, счётчики */
  --radius-8: 8px;     /* кнопки, поля, фото в списках */
  --radius-10: 10px;   /* карточки, панель шапки */
  --radius-12: 12px;   /* крупные карточки, фото, раскрытый список */
  --radius-pill: 100px;
  --radius-footer: 40px; /* подвал: скругление только сверху (40 40 0 0) */

  /* ── Сетка ────────────────────────────────────────────────────────────────── */
  --mobile-frame: 390px;          /* ширина мобильных макетов */
  --desktop-frame: 1440px;        /* ширина десктопных макетов */
  --container: 1760px;            /* предел колонки: на 1920 поле 80 px (в макете 1280 при 1440) */
  --gutter-desktop: 40px;         /* в макете 80 px; уменьшено по просьбе заказчика */
  --gutter-tablet: 24px;
  --gutter-mobile: 16px;          /* шапка на мобайле — 14px */
  --section-gap-desktop: 96px;    /* расстояние между блоками страницы на десктопе */
  --section-gap-mobile: 50px;     /* расстояние между блоками страницы на мобайле */
}

/* ── Резиновая сетка (добавлено при вёрстке) ─────────────────────────────────
   Макеты 390 и 1440 px — референс, а не фиксированная ширина.
   < 768      мобильная вёрстка, резиново от 360 px, поля 16 px;
   768–1199   десктопная структура блоков, мобильная шапка, поля 24 px;
   ≥ 1200     десктоп: колонка min(1760px, 100% − 2 × 40px) — контент почти во всю ширину окна.
   Фоновые полосы тянутся на всю ширину окна, контент — в колонке по центру. */
:root {
  --gutter: var(--gutter-mobile);
  --page-gap: var(--section-gap-mobile);
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--gutter-tablet);
    --page-gap: var(--section-gap-desktop);
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: var(--gutter-desktop);
  }
}