/* ТИПОГРАФИКА ПО КАНВАСУ (борд TokensSpec, 2026-09-01).
 *
 * Канвас требует ДВА шрифта с разными ролями:
 *   Chillax 600 — H1, H2 и кнопки;
 *   Outfit     — всё остальное (текст, названия товаров, кикеры, мета).
 *
 * ★ ПОЧЕМУ ЭТО ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ПРАВКА ЗЕРКАЛА ТЕМЫ.
 * Зеркало темы объявляет:
 *     body.gradient * { font-family:"chillax" !important }
 *     body.gradient div.shopify-section * { font-family:"chillax" !important }
 * и красит Chillax'ом ВЕСЬ текст. Файлы public/theme-generated/*.css
 * ГЕНЕРИРУЮТСЯ скриптом build-theme-bundles.sh на каждой сборке из
 * public/theme — правка в них исчезнет при первой же пересборке. Поэтому
 * общий запрет перебивается здесь, тем же приёмом, что уже применён для
 * бейджей карточки и каруселей: наш файл грузится ПОСЛЕ зеркала.
 *
 * ★ СПЕЦИФИЧНОСТЬ. Правила зеркала — (0,1,1) и (0,2,2). Добавленный `html`
 * поднимает наши до (0,1,2) и (0,2,3): выигрывают, оставаясь такими же
 * общими. Заголовки и кнопки перечислены поимённо и поэтому бьют уже наше
 * же правило тела.
 *
 * ★ h3 НАМЕРЕННО НЕ ЗАГОЛОВОК. Название товара в карточке — это <h3
 * class="upc__title">, а спека карточки требует для него Outfit 600. Если
 * записать h3 в «дисплейные», карточка сломается по всему магазину.
 *
 * ★ РАЗМЕРЫ ЗДЕСЬ НЕ ТРОГАЕМ. Этот цикл меняет только НАЧЕРТАНИЯ (какой
 * шрифт и какой вес). Кегли из спеки приходят вместе с перекроем каждого
 * блока — иначе одна правка размера тела переверстала бы всю витрину
 * разом, и ни один сбой нельзя было бы отнести к своей причине.
 */

:root {
  /* Роли шрифтов. Дублируют dozo-tokens.css намеренно: тот файл — модуль
     Next и на страницы зеркала темы не попадает. */
  --dz-font-display: "Chillax", "Outfit", system-ui, sans-serif;
  --dz-font-body: "Outfit", system-ui, sans-serif;

  /* Переменные темы: их читают правила зеркала (body, .h0…, .button). */
  --font-body-family: var(--dz-font-body);
  --font-body-weight: 500;
  --font-heading-family: var(--dz-font-display);
  --font-heading-weight: 600;
}

/* ── 1. Тело: Outfit ──────────────────────────────────────────────────── */
html body.gradient *,
html body.gradient div.shopify-section * {
  font-family: var(--dz-font-body) !important;
}

/* ── 2. Заголовки и кнопки: Chillax 600 ───────────────────────────────── */
html body.gradient h1,
html body.gradient h2,
html body.gradient .h0,
html body.gradient .h1,
html body.gradient .h2,
html body.gradient .dz-display,
/* Элементы канваса, которые НЕ заголовки, но набраны Chillax: подпись
   подписки в подвале, слово «Legal disclaimer», цена в промо-блоке. Без
   поимённого перечисления их красит общее правило тела. */
html body.gradient .dz-foot__signup-title,
html body.gradient .disclaimer_title,
html body.gradient .dz-promo-price__from,
html body.gradient .dz-foot__signup-form button,
html body.gradient .button,
html body.gradient button.button,
html body.gradient .btn,
html body.gradient .shopify-payment-button__button,
html body.gradient div.shopify-section h1,
html body.gradient div.shopify-section h2,
html body.gradient div.shopify-section .h0,
html body.gradient div.shopify-section .h1,
html body.gradient div.shopify-section .h2,
html body.gradient div.shopify-section .dz-display,
html body.gradient div.shopify-section .dz-foot__signup-title,
html body.gradient div.shopify-section .disclaimer_title,
html body.gradient div.shopify-section .dz-promo-price__from,
html body.gradient div.shopify-section .dz-foot__signup-form button,
html body.gradient div.shopify-section .button,
html body.gradient div.shopify-section button.button,
html body.gradient div.shopify-section .btn {
  font-family: var(--dz-font-display) !important;
  font-weight: 600;
}

/* Кнопки по спеке: uppercase, разрядка .04em. Кегль и высота — у каждой
   кнопки свои, приходят с перекроем блока. */
html body.gradient .button,
html body.gradient button.button,
html body.gradient .btn,
html body.gradient div.shopify-section .button,
html body.gradient div.shopify-section button.button,
html body.gradient div.shopify-section .btn {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── 3. Кикер надзаголовка (New drop, Bundle deal) ────────────────────── */
html body.gradient .dz-kicker,
html body.gradient div.shopify-section .dz-kicker {
  font-family: var(--dz-font-body) !important;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #f49bf9;
}