/* ============================================================
   YES YOU CAN — ДИЗАЙН-ТОКЕНЫ
   Источник: ПАК 4 (04_specifikaciya/specifikaciya.md). Все значения оттуда.
   ПРАВИЛО: hex-цвет в коде вне этого файла — запрещён. Только var(--…).
   Базовый макет: мобильный, ширина 390 px. Размеры ниже — для 390 px.
   ============================================================ */

/* ---------- ШРИФТЫ (self-host, без CDN) ---------- */
@font-face{
  font-family:"Anton";
  src:url("../fonts/anton-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-variable.woff2") format("woff2-variations"),
      url("../fonts/inter-variable.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* ---------- БАЗОВЫЕ ЦВЕТА ---------- */
  --cream:#F8F1E7;            /* основной фон сайта */
  --cream-2:#F1E7D8;          /* фон конфигуратора, счётчика */
  --ink:#171310;              /* основной текст, заголовки, рамки */
  --green:#0C3B2E;            /* заголовок hero, цифры фактов, фон Full Mix */
  --crimson:#D6204F;          /* промо-бар, eyebrow, основная кнопка */
  --crimson-dark:#A80F3A;     /* «Contains milk», нажатая кнопка */
  --muted-1:#5A5148;          /* приглушённый текст (hero support) */
  --muted-2:#4C443C;          /* вторичный текст, trust-ряд */
  --muted-3:#6B6055;          /* мелкие пометки */
  --muted-4:#8A7F72;          /* зачёркнутая цена, примечания */
  --dark-section:#141010;     /* фон Soda First, Social, Footer */
  --dark-builder:#171012;     /* фон Build Your 4-Pack */
  --card-border:#E4D8C6;      /* рамки карточек и аккордеонов */
  --card-border-2:#EFE5D4;    /* разделители строк внутри карточек */
  --white:#FFFFFF;
  --hero-radial:#FDF9F1;      /* верхний радиальный блик hero */

  /* ---------- АКЦЕНТЫ ВКУСОВ ---------- */
  --cola-g1:#4A0A18; --cola-g2:#6E1226; --cola-g3:#59101F;
  --cola-name:#F8F1E7; --cola-btn-bg:#F8F1E7; --cola-btn-text:#5E0E1F;
  --cola-cap-1:#E8B7C2; --cola-cap-2:#EFD9CD;

  --cherry-g1:#D7F24B; --cherry-g2:#C2E438; --cherry-g3:#ACD12A;
  --cherry-name:#C40031; --cherry-btn-bg:#17380F; --cherry-btn-text:#D7F24B;
  --cherry-dark-1:#17380F; --cherry-dark-2:#2C4A12;

  --grape-g1:#8EE033; --grape-g2:#79CB24; --grape-g3:#66B31B;
  --grape-name:#5A189A; --grape-btn-bg:#5A189A; --grape-btn-text:#E9D8FF;
  --grape-dark-1:#1E4D0F; --grape-dark-2:#26590F;

  --cream-g1:#E0A558; --cream-g2:#C9863A; --cream-g3:#B06F28;
  --cream-name:#FFF6E8; --cream-btn-bg:#3E2208; --cream-btn-text:#FFE8C6;
  --cream-dark-1:#5B3410; --cream-dark-2:#4E2E10;

  /* ---------- ПОСЕКЦИОННЫЕ ЦВЕТА ---------- */
  --problem-box-bg:#EFEAE0;   --problem-box-border:#DDD5C7;
  --problem-cross:#E4002B;
  --chip-old-bg:#DDD5C7;      --chip-old-text:#6E665C;
  --fullmix-text-2:#CFE3D8;   --fullmix-micro:#9DC3AF;
  --sodafirst-eyebrow:#FF5C8A;
  --sodafirst-text-2:#C9BCB2;
  --allergen-bg:#FBEDF1;      --allergen-text:#A80F3A;
  --radio-border:#C9BBA6;
  --footer-link:#B9AFA6;      --footer-legal:#6E665F;
  --input-border:#E4D8C6;     --input-placeholder:#B4A998;
  --overlay:rgba(23,19,16,.6);  /* фон под попапом заказа (ТЗ 11.09 §8.2) */

  /* ---------- ТИПОГРАФИКА ---------- */
  --font-display:"Anton", Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-h1:56px;        --lh-h1:0.98;    /* YES YOU CAN в hero */
  --fs-h2:min(40px, 8.4vw); --lh-h2:1.02; /* заголовок секции: плавно, ≤2 строк на мобильном (ТЗ 11.09 §3): 30,2 на 360; 32,8 на 390; 40 от 476 */
  --fs-flavour:52px;   --lh-flavour:0.98;
  --fs-eyebrow:12px;   --ls-eyebrow:0.16em;
  --fs-sub-hero:15px;  --lh-sub-hero:1.4;
  --fs-support:12.5px; --lh-support:1.45;
  --fs-body:15px;      --lh-body:1.5;
  --fs-flavour-desc:14.5px;
  --fs-flavour-style:16px;
  --fs-btn:14px;       --ls-btn:0.055em;
  --fs-badge-num:18px;
  --fs-badge-cap:12px; --ls-badge-cap:0.02em;   /* минимальный кегль сайта 12 px (ТЗ 11.09 §10) */
  --fs-offer:13px;     --lh-offer:1.4;
  --fs-trust:12px;
  --fs-promo:12px;     --ls-promo:0.06em; --lh-promo:1.35;
  --fs-step:12px;      --ls-step:0.14em;
  --fs-micro:12px;     --lh-micro:1.4;
  --fs-reassure:17px;       /* заголовок карточки reassurance, измерено по эталону */
  --fs-price:18px;     --lh-price:1.2;   /* итог TOTAL — Inter 700 (правка Жени 11.09), было Anton 40 */
  --fs-price-old:14px;      /* зачёркнутая сумма в блоке TOTAL (ТЗ 11.09 §6.2) */
  --fs-faq-q:14px;     --lh-faq-q:1.35;
  --fs-faq-a:13.5px;   --lh-faq-a:1.57;
  --fs-footer-brand:30px;
  --fs-footer-link:13px; --lh-footer-link:1.3;
  --fs-footer-legal:12px; --lh-footer-legal:1.6;

  /* ---------- ОТСТУПЫ И СЕТКА ---------- */
  --pad-side:20px;          /* боковые поля экрана */
  --pad-side-btn:24px;      /* поля кнопок hero/конфигуратора */
  --sec-pt:22px;            /* правка Оли: промежутки между экранами подтянуты */
  --sec-pb:22px;            /* было 57/56 = 113 px на стыке, стало 44 */
  --gap-title-text:15px;
  --gap-text-btn:21px;
  --promo-h:32px;        /* измерено по эталону 00_promo.png */
  --promo-pad:0 12px;    /* было 9px 12px: при кегле 12 (ТЗ 11.09 §10) строка 16,2 + 18 = 34 > 32; высоту держит min-height 32 */
  --nav-h:58px;          /* эталон 57.5, округлено */
  --gap-badges:6px;      /* ряд бейджей hero / What's Inside (ТЗ 11.09 §4) */
  --gap-lifestyle:10px;
  --gap-social:8px;
  --gap-facts:10px;

  /* ---------- ФОРМА ---------- */
  --r-pill:999px;
  --r-badge:14px;
  --r-card:17px;
  --r-tile-life:18px;
  --r-tile-social:14px;
  --r-photo:18px;
  --r-config:26px;
  --r-select:16px;
  --r-row:16px;
  --r-counter:12px;
  --r-chip:8px;
  --r-input:14px;

  --h-btn:54px;
  --h-btn-flavour:52px;
  --h-input:52px;
  --size-counter:36px;   /* кнопки степпера в конфигураторе (ТЗ 11.09 §6.2) */

  /* ---------- ТЕНИ ---------- */
  --sh-btn:0 10px 24px rgba(214,32,79,.35);
  --sh-btn-active:0 4px 10px rgba(214,32,79,.3);
  --sh-btn-lime:0 10px 24px rgba(177,0,46,.35);
  --sh-btn-cta:0 11px 26px rgba(214,32,79,.4);
  --ds-can-hero:drop-shadow(0 22px 22px rgba(40,20,10,.28));
  --ds-can-flavour:drop-shadow(0 22px 24px rgba(0,0,0,.3));
  --ds-can-fullmix:drop-shadow(0 12px 12px rgba(0,0,0,.35));
  --ds-can-problem:drop-shadow(0 14px 16px rgba(40,20,10,.3));
  --ds-can-inside:drop-shadow(0 16px 18px rgba(40,20,10,.25));
  --ds-can-tile:drop-shadow(0 8px 10px rgba(0,0,0,.38));

  /* ---------- ДВИЖЕНИЕ ---------- */
  --dur-fast:.16s;
  --dur:.24s;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* На узких телефонах пропорционально ужимаем крупную типографику,
   чтобы композиция сохранялась, а не ломалась. */
@media (max-width:359px){
  :root{
    --fs-h1:48px; --fs-flavour:44px; --fs-price:16px;  /* --fs-h2 здесь не переопределяем: формула min(40px, 8.4vw) уже плавная */
    --pad-side:16px;
  }
}
/* Планшет и шире: макет остаётся мобильным, но центрируется и слегка укрупняется. */
@media (min-width:600px){
  :root{ --fs-h1:62px; --fs-h2:44px; --fs-flavour:56px; }
}