/* =========================================================================
   MultigonLab — Design Tokens v1
   Зафиксировано: 15.07.2026
   Источник: пиксельный анализ 12 утверждённых контакт-листов ChatGPT
   (см. MultigonLab_Token-спецификация.md — методология и уровень точности)
   ========================================================================= */

:root {
  /* ---------- Цвет: фон и поверхности ---------- */
  --color-bg: #FFFFFF;              /* основной фон страницы */
  --color-bg-alt: #F8F8FA;          /* альтернативный фон (едва заметный оттенок) */
  --color-surface: #FFFFFF;         /* поверхность карточки */
  --color-border: #E5E7EA;          /* граница/разделитель, светлый нейтральный */
  --color-dark-section: #232933;    /* хедер / hero / футер / промо-баннеры */
  --color-page-outer: #000000;      /* фон страницы (header/hero/footer) — снят пипеткой с самой тёмной
                                        зоны референса hero_image.png (монитор/тень), чтобы стол маскота
                                        визуально растворялся в фоне. Обновлено 15.07.2026. */

  /* ---------- Цвет: текст ---------- */
  --color-text-primary: #43474D;    /* заголовки и основной текст (тёмный slate, не чистый чёрный) */
  --color-text-secondary: #979AA0;  /* вторичный/приглушённый текст (даты, мета) */
  --color-text-inverse: #FFFFFF;    /* текст на тёмном фоне */

  /* ---------- Цвет: акценты ---------- */
  --color-primary: #6C9922;         /* основной зелёный — default состояние кнопок/акцентов */
  --color-primary-hover: #82B433;   /* светлее — hover */
  --color-primary-active: #5F8223;  /* темнее — active/pressed */

  --color-accent-amber: #FC9B00;    /* бейджи (Bestseller), акцентные плашки */
  --color-accent-coral: #F76A01;    /* CTA-кнопки промо-типа (напр. "Get Free Download") */
  --color-gold: #FCBD14;            /* звёзды рейтинга */
  --color-red: #E85E5C;             /* Sale-бейдж / error */
  --color-blue: #557CB6;            /* доп. категория (напр. "3D Assets") */

  /* ---------- Цвет: пастельные подложки (light tints) ---------- */
  --color-tint-green: #ECF4E1;      /* фон категорийной пилюли / плашки */
  --color-tint-green-soft: #F2F6EE; /* фон подсветки "Most Popular" в таблице сравнения */
  --color-tint-peach: #FEF0E2;      /* фон промо-карточки / бейджа продаж */
  --color-tint-pink: #FEF0EE;       /* фон Sale-бейджа */

  /* ---------- Типографика ---------- */
  --font-heading: 'Poppins', 'Clash Display', sans-serif;  /* округлый geometric sans — уточнить конкретный шрифт при вёрстке */
  --font-body: 'Inter', 'Public Sans', sans-serif;

  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;

  /* ---------- Отступы (8pt-шкала) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------- Радиусы скругления ---------- */
  --radius-sm: 8px;    /* кнопки, инпуты, бейджи */
  --radius-md: 14px;   /* карточки */
  --radius-lg: 22px;   /* hero-блоки, крупные контейнеры */
  --radius-full: 999px; /* пилюли, круглые аватары */

  /* ---------- Тени ---------- */
  --shadow-1: 0 2px 8px rgba(35, 41, 51, 0.06);   /* карточка, дефолт */
  --shadow-2: 0 6px 20px rgba(35, 41, 51, 0.12);  /* приподнятый элемент / hover / sticky-бар */

  /* ---------- Сетка и контейнер ---------- */
  --container-max: 1400px;
  --grid-columns: 12;
  --gutter-sm: 12px;
  --gutter-md: 24px;
  --gutter-lg: 32px;
  --section-gap: 64px;

  /* ---------- Брейкпоинты (используются в media-запросах вручную, CSS-переменные их не хранят) ---------- */
  /* mobile: < 640px · tablet: 640–1024px · desktop: >= 1024px */
}

/* ---------- Мобильная типографика (17.07.2026, "стандартизация типографики",
   Шаг 4) — в теме до сих пор не было НИ ОДНОГО @media-запроса (сайт
   сознательно не адаптивный, полная адаптация — отдельная, гораздо более
   крупная задача, отложена). Этот же @media — узкий и точечный: только
   переопределяет размеры заголовков через те же токены, что уже везде
   используются (--fs-h1..h4), поэтому пропорционально уменьшается любой
   заголовок на сайте (.page-title, .article-body h1-h4, карточки и т.д.) —
   без правки каждого селектора по отдельности. Брейкпоинт — 640px, как в
   комментарии выше ("mobile: < 640px"), а не придуманное число.
   --fs-body/--fs-small/--fs-caption НЕ трогаем — 16px и меньше уменьшать
   дальше на мобильном нельзя, это уже нижняя комфортная граница чтения. */
@media (max-width: 640px) {
  :root {
    --fs-h1: 30px;
    --fs-h2: 26px;
    --fs-h3: 21px;
    --fs-h4: 18px;
  }
}