/* ==========================================================================
   ARM-GARANT — токены темы

   Источник: _figma/01-ui-kit/tokens.css (разбор макета от 2026-08-03,
   fileKey Cz6ZOkOHh8O6qcXh7wKoLl).
   Здесь РАБОЧАЯ копия: значения перенесены один раз, дальше правятся здесь.
   Хардкод цветов, размеров и шрифтов в секционных CSS запрещён.

   Пометки:
     [VAR]     — переменная Figma, имя дизайнера сохранено в комментарии
     [RAW]     — сырая заливка макета, переменной в Figma нет
     [ВЫВЕДЕН] — в макете отсутствует, решение вёрстки. Дизайнеру на подтверждение.

   Сведено при переносе (см. _figma/01-ui-kit/colors.md):
     #F6F6F6 / #F7F7F7 / #F3F3F3 / #F8F8F8 → один --color-bg-soft
     #0A0A0A / #090909                     → один --color-text
   ========================================================================== */

:root {

  /* --- Цвет: бренд ------------------------------------------------------ */
  --color-brand:        #4867BF;   /* [VAR] bg_blue / text_blue — кнопки, ссылки, акценты */
  --color-brand-hover:  #3A56A8;   /* [ВЫВЕДЕН] в Figma hover сделан сменой варианта, а не оттенком */
  --color-navy:         #0E1534;   /* [RAW] 834 узла — футер, тёмные секции. Переменной в Figma НЕТ */

  /* --- Цвет: фон и текст ------------------------------------------------ */
  --color-bg:           #FFFFFF;   /* [VAR] bg_white */
  --color-bg-soft:      #F7F7F7;   /* [VAR] bg_white-grey (+ сведённые #F6F6F6/#F3F3F3/#F8F8F8) */
  --color-text:         #0A0A0A;   /* [VAR] text_black */
  --color-text-soft:    #4A4A4A;   /* [RAW] строки контактов, ноды 1:1655…1:1675 */
  --color-text-muted:   #757575;   /* [VAR] text_grey */
  --color-text-faint:   #9E9E9E;   /* [RAW] описание проекта, нода 1:2416 */
  --color-text-invert:  #FFFFFF;   /* [VAR] text_white */
  --color-border:       #DADADA;   /* [RAW] рамки инпутов и карточек */
  --color-border-soft:  #E7E7E7;   /* [VAR] bg_light_grey — разделители */

  /* --- Цвет: статусы ---------------------------------------------------- */
  --color-success:      #237803;   /* [VAR] text_green — «Бесплатно», бейджи */
  --color-stock:        #00A63E;   /* [RAW] «В наличии» в карточке товара, 1:3953 */
  --color-success-dot:  #00C950;   /* [RAW] точка-индикатор наличия */
  --color-error:        #DC2626;   /* [RAW] текст и рамка ошибки поля */
  --color-whatsapp:     #25D366;   /* [RAW] фирменный WhatsApp */

  /* --- Цвет: голубые подложки ------------------------------------------- */
  --color-blue-50:      #E9EDF4;   /* [RAW] подложка под иконкой */
  --color-blue-100:     #D1DEED;   /* [RAW] */
  --color-blue-200:     #BACEE5;   /* [RAW] */

  /* --- Градиенты --------------------------------------------------------
     Переменные bg_blue_gradient и bg_blue_gradient_2 в Figma объявлены, но
     пустые — значения взяты из сырых заливок. Углы API не отдаёт, сняты
     по рендеру. */
  --grad-blue-main: linear-gradient(180deg, #3E59A7 0%, #0E1534 100%);             /* [RAW] x142 */
  --grad-blue-cta:  linear-gradient(to left, #4867BF 0%, #0E1534 75.962%);         /* [RAW] x74 — подвал, CTA-панели */
  --grad-blue-band: linear-gradient(90deg, #0E1534 0%, #4867BF 50%, #0E1534 100%); /* [RAW] x41  */
  --grad-fade-navy: linear-gradient(180deg, #0E1534 5%, rgba(14, 21, 52, 0) 100%); /* [RAW] x51  */
  --grad-instagram: linear-gradient(45deg, #FCAF45 0%, #E1306C 50%, #833AB4 100%); /* [RAW] x135 */

  /* --- Типографика ------------------------------------------------------- */
  --font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --lh-tight: 1.2057;   /* [VAR] 120.5689 % — заголовки, кнопки, большинство текста */
  --lh-loose: 1.4;      /* [VAR] 140 % — длинные описания */

  --ls-3: -0.03em;      /* [VAR] */
  --ls-4: -0.04em;      /* [VAR] */
  --ls-6: -0.06em;      /* [VAR] */
  --ls-9: -0.09em;      /* [VAR] */

  /* Шкала размеров. Имена — из Figma, чтобы разбор и вёрстка звали одно
     и то же одинаково. 14 и 18 px в макете используются (156 узлов),
     но именованных стилей у них нет. */
  --fs-96: 96px;  --ls-96: var(--ls-9);   /* [VAR] text_96 — цифры статистики, Medium */
  --fs-48: 48px;  --ls-48: var(--ls-6);   /* [VAR] h_1 */
  --fs-40: 40px;  --ls-40: var(--ls-6);   /* [VAR] h_2 и text_40_semibold */
  --fs-32: 32px;  --ls-32: var(--ls-6);   /* [VAR] text_32_med — заголовки карточек */
  --fs-28: 28px;  --ls-28: var(--ls-4);   /* [VAR] text_28_reg — названия товаров */
  --fs-24: 24px;  --ls-24: var(--ls-3);   /* [VAR] button / text_24_med / text_24_reg */
  --fs-20: 20px;  --ls-20: var(--ls-3);   /* [VAR] text_20_reg / item */
  --fs-18: 18px;  --ls-18: var(--ls-3);   /* [ВЫВЕДЕН] 7 узлов, стиля в Figma нет */
  --fs-16: 16px;  --ls-16: var(--ls-3);   /* [VAR] text_16_med */
  --fs-14: 14px;  --ls-14: var(--ls-3);   /* [ВЫВЕДЕН] 156 узлов, стиля в Figma нет */
  --fs-12: 12px;  --ls-12: var(--ls-3);   /* [ВЫВЕДЕН] подписи форматов файлов (1:1701) */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  /* Bold 700 в макете не встречается — не использовать. */

  /* Совместимость со скелетом темы */
  --fs-h1: var(--fs-48);   --lh-h1: var(--lh-tight);   --fw-h1: 500;   --ls-h1: var(--ls-6);
  --fs-h2: var(--fs-40);   --lh-h2: var(--lh-tight);   --fw-h2: 500;   --ls-h2: var(--ls-6);
  --fs-body: var(--fs-20); --lh-body: var(--lh-loose); --fw-body: 400; --ls-body: var(--ls-3);

  /* --- Сетка -------------------------------------------------------------
     В макете ВСЕ 42 ноды нарисованы под 1920 px. Мобильной и планшетной
     версий нет — брейкпоинты приняты вёрсткой и ждут согласования,
     см. «Дыры макета» в _figma/00-INDEX.md. */
  --container:      1840px;  /* [RAW] контентная колонка на всех страницах */
  --side-padding:   40px;    /* [RAW] (1920 − 1840) / 2 */
  --gutter:         40px;    /* [ВЫВЕДЕН] шаг сетки карточек; сетка в Figma не задана */
  --section-gap:    190px;   /* [RAW] вертикальный ритм секций контентных страниц (x10) */
  --section-gap-sm: 128px;   /* [RAW] ритм страниц входа и личного кабинета (x7) */

  /* --- Отступы ----------------------------------------------------------
     [ВЫВЕДЕН] переменных отступа в Figma нет; шкала выведена из padding
     карточек (24 / 32) и повторяющихся зазоров. */
  --space-2: 2px;   --space-4: 4px;   --space-8: 8px;
  --space-12: 12px; --space-16: 16px; --space-24: 24px;
  --space-32: 32px; --space-48: 48px; --space-64: 64px;

  /* --- Радиусы ---------------------------------------------------------- */
  --radius-sm:   4px;    /* [RAW] x105 */
  --radius-md:   12px;   /* [RAW] x418 */
  --radius-lg:   24px;   /* [RAW] x716 — карточки товаров */
  --radius-xl:   32px;   /* [RAW] x695 — крупные карточки и секции */
  --radius-pill: 999px;  /* [RAW] x1831 — кнопки, теги, инпуты. Самый частый радиус макета */

  /* --- Тени и размытия ---------------------------------------------------
     DROP_SHADOW в макете НЕТ НИ ОДНОЙ: карточки отделяются от фона только
     заливкой. Переменной тени здесь намеренно нет — любой box-shadow
     в вёрстке будет отсебятиной. */
  /* Figma задаёт радиус размытия по своей шкале: 7.2 в макете равно
     CSS blur(3.6px). С 7.2 плашки размывает вдвое сильнее макета. */
  --blur-glass: blur(3.6px);               /* [RAW] BACKGROUND_BLUR x194 — плашки на тёмном */
  --glass-fill: rgba(255, 255, 255, .22);  /* [RAW] заливка тех же плашек */

  /* --- Обводки ----------------------------------------------------------- */
  --stroke-icon: 3px;    /* [RAW] x1417 — толщина обводки иконок, нетипично толстая */

  /* --- Движение ----------------------------------------------------------
     Длительности из реакций прототипа (_figma/03-prototype/MOTION.md).
     Кривая в Figma не задана — ease принят вёрсткой. */
  --dur-fast:  150ms;   /* [RAW] hover кнопок, ссылок, фильтров */
  --dur-base:  300ms;   /* [RAW] клики-переключатели: табы, чекбоксы */
  --dur-card:  744ms;   /* [RAW] hover карточек и тегов — заметно медленнее, спросить дизайнера */
  --dur-scene: 1667ms;  /* [RAW] кадр hero-раскадровки */
  --ease-out:  cubic-bezier(0, 0, .58, 1);  /* [ВЫВЕДЕН] */

  /* --- Слои --------------------------------------------------------------
     [ВЫВЕДЕН] полностью — в Figma порядок слоёв, а не z-index. */
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;
}

/* --- Узкие экраны -----------------------------------------------------------
   [ВЫВЕДЕН] Мобильных экранов в макете нет. Поле 40 px на телефоне съедает
   пятую часть ширины: карточки сжимаются, листалки вылезают за экран.
   Ниже 900 px поле 20 px — все контейнеры и развороты лент (margin-inline
   со знаком минус в page-korzina.css) подхватывают его сами. */
@media (max-width: 900px) {
  :root {
    --side-padding: 20px;
  }
}

/* Ритм секций на телефоне: 190/128 px воздуха между блоками на экране
   375 px — это полтора экрана пустоты. Все паддинги секций и страниц
   считаются от этих токенов, поэтому ужимаем ритм здесь, а не по файлам. */
@media (max-width: 700px) {
  :root {
    --section-gap: 96px;
    --section-gap-sm: 64px;
  }
}