/* Копия из brand/design-kit/kg-claude-code-kit/styles/kg-tokens.css для темы kg-blog (12.10.2026).
   ДВА отступления от оригинала, всё остальное один в один:
   1) убран @import шрифтов Google: Unbounded и Inter уже подключены шапкой Тильды (header.php),
      второй внешний запрос на каждую страницу не нужен; Raleway нигде не используется;
   2) базовые сбросы (box-sizing, body, a, img) привязаны к :where(.kg-blog-main): с нулевой
      специфичностью и только внутри основной части страницы. Без этого `a {color: red}` и `body {...}`
      из кита поехали бы на шапку и подвал Тильды. Обновляя файл из кита, повтори обе правки. */
/* ==========================================================================
   КРЫМСКИЙ ГЕКТАР — Design Tokens
   Значения перенесены из фирменного Figma-файла. Не менять и не «округлять».
   Подключать первым: <link rel="stylesheet" href="styles/kg-tokens.css">
   ========================================================================== */


:root {
  /* ── ЦВЕТ ────────────────────────────────────────────────────────────── */
  /* Красный — единственный цвет действия: CTA, ссылки, цена-акцент, лента скидки */
  --kg-red:        #ED3C24;
  --kg-red-light:  #FF8574;  /* иконка-бейдж в CTA, hover */
  --kg-red-coral:  #FF7E6D;  /* hover play-бейджа видео */
  --kg-red-100:    #FFDED9;  /* заливка вторичной кнопки */

  /* Синий — информация / активное состояние: eyebrow-плашки, активный FAQ, «на карте» */
  --kg-blue:       #2C9CED;
  --kg-blue-light: #54AFF0;
  --kg-blue-badge: #1695F0;

  /* Зелёный (из логотипа) и золото — точечно, максимум один акцент на экран */
  --kg-green:      #8DD32A;
  --kg-green-2:    #7AB922;
  --kg-gold:       #FFD700;

  /* Чернила и нейтрали */
  --kg-ink:        #272524;  /* заголовки */
  --kg-ink-2:      #252525;  /* основной текст */
  --kg-white:      #FFFFFF;
  --kg-grey-bg:    #F6F6F6;  /* фон секции */
  --kg-grey-chip:  #F3F3F3;  /* серый инфо-чип */
  --kg-grey-300:   #D9D9D9;
  --kg-border:     #E3E3E3;  /* разделители */
  --kg-border-2:   #E7E7E7;  /* волосяная рамка карточки */

  /* Семантические алиасы — в разметке используйте их */
  --kg-text-primary:   var(--kg-ink);
  --kg-text-secondary: var(--kg-ink-2);
  --kg-text-muted:     rgba(37,37,37,0.4);   /* подписи в карточках */
  --kg-text-inverse:   var(--kg-white);
  --kg-surface:        var(--kg-white);
  --kg-surface-alt:    var(--kg-grey-bg);
  --kg-surface-chip:   var(--kg-grey-chip);
  --kg-accent:         var(--kg-red);
  --kg-accent-hover:   var(--kg-red-light);
  --kg-accent-soft:    var(--kg-red-100);
  --kg-info:           var(--kg-blue);
  --kg-link:           var(--kg-red);
  --kg-link-hover:     var(--kg-red-light);

  /* ── ТИПОГРАФИКА ─────────────────────────────────────────────────────── */
  /* Display = Unbounded (ВСЕГДА UPPERCASE, letter-spacing .02em)
     Body = Inter (базовый размер 15px, line-height 1.3)
     Raleway SemiBold — редкий акцент */
  --kg-font-display: 'Unbounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --kg-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --kg-font-accent:  'Raleway', var(--kg-font-body);

  --kg-w-light: 300;
  --kg-w-regular: 400;
  --kg-w-medium: 500;
  --kg-w-semibold: 600;
  --kg-w-bold: 700;
  --kg-w-extrabold: 800;

  --kg-display-xl: 52px;  /* H1 первого экрана */
  --kg-display-lg: 36px;  /* заголовок секции */
  --kg-display-md: 28px;  /* заголовок карточки */
  --kg-display-sm: 24px;  /* подзаголовок, цена */
  --kg-display-xs: 20px;

  --kg-body-lg:   20px;
  --kg-body-md:   18px;   /* лейблы кнопок */
  --kg-body-base: 15px;   /* доминирующий размер текста */
  --kg-body-sm:   13px;
  --kg-body-xs:   12px;

  --kg-lh-tight: 1.2;
  --kg-lh-base:  1.3;
  --kg-ls-display: 0.02em;
  --kg-ls-tight: -0.02em; /* лейблы кнопок */

  /* ── ОТСТУПЫ (ритм 4/6/10/16/20/30) ──────────────────────────────────── */
  --kg-space-1: 4px;
  --kg-space-2: 6px;
  --kg-space-3: 10px;
  --kg-space-4: 16px;
  --kg-space-5: 20px;
  --kg-space-6: 30px;
  --kg-space-7: 40px;
  --kg-space-8: 60px;
  --kg-section-y: 100px;   /* вертикальный ритм секций (desktop) */
  --kg-container: 1200px;  /* макетная сетка: 1200 / 640 / 340 */

  /* ── РАДИУСЫ ─────────────────────────────────────────────────────────── */
  --kg-radius-chip: 6px;    /* серый инфо-чип */
  --kg-radius-sm:   16px;   /* внутреннее изображение */
  --kg-radius-md:   20px;   /* FAQ / квиз / медиа-карточка */
  --kg-radius-lg:   27px;   /* фото внутри карточки */
  --kg-radius-xl:   30px;   /* основная карточка */
  --kg-radius-pill: 200px;  /* кнопки, поля ввода */

  /* ── ТЕНИ И СОСТОЯНИЯ ────────────────────────────────────────────────── */
  --kg-shadow-card: 0px 2px 17px 0px rgba(0,0,0,0.1);
  --kg-shadow-soft: 0px 2px 17px 0px rgba(84,138,174,0.15);
  --kg-shadow-step: 0px 0px 22px 0px rgba(174,207,255,0.5);
  --kg-ring-focus:  0 0 0 4px rgba(237,60,36,0.2);
  --kg-transition:  .15s ease;

  /* Защитный градиент поверх фото в hero (слева направо) */
  --kg-hero-scrim: linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.05) 100%);
}

/* ── Базовые сбросы ────────────────────────────────────────────────────── */
:where(.kg-blog-main), :where(.kg-blog-main) *, :where(.kg-blog-main) *::before, :where(.kg-blog-main) *::after { box-sizing: border-box; }
:where(.kg-blog-main) {
  margin: 0;
  font-family: var(--kg-font-body);
  font-size: var(--kg-body-base);
  line-height: var(--kg-lh-base);
  color: var(--kg-text-secondary);
  background: var(--kg-white);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
:where(.kg-blog-main) a { color: var(--kg-link); text-decoration: none; transition: color var(--kg-transition); }
:where(.kg-blog-main) a:hover { color: var(--kg-link-hover); }
:where(.kg-blog-main) img { max-width: 100%; display: block; }

/* ── Типографические утилиты ───────────────────────────────────────────── */
.kg-display-xl, .kg-display-lg, .kg-display-md, .kg-display-sm, .kg-price {
  font-family: var(--kg-font-display);
  letter-spacing: var(--kg-ls-display);
  text-transform: uppercase;
  color: var(--kg-text-primary);
  margin: 0;
}
.kg-display-xl { font-weight: var(--kg-w-medium);  font-size: var(--kg-display-xl); line-height: 1.15; }
.kg-display-lg { font-weight: var(--kg-w-medium);  font-size: var(--kg-display-lg); line-height: 1.15; }
.kg-display-md { font-weight: var(--kg-w-regular); font-size: var(--kg-display-md); line-height: var(--kg-lh-base); }
.kg-display-sm { font-weight: var(--kg-w-medium);  font-size: var(--kg-display-sm); line-height: var(--kg-lh-tight); }
.kg-price      { font-weight: var(--kg-w-medium);  font-size: var(--kg-display-sm); }

.kg-body-lg   { font-size: var(--kg-body-lg); line-height: var(--kg-lh-base); color: var(--kg-text-secondary); }
.kg-body      { font-size: var(--kg-body-md); line-height: 1.4; color: var(--kg-text-secondary); }
.kg-body-base { font-size: var(--kg-body-base); line-height: var(--kg-lh-base); color: var(--kg-text-secondary); }
.kg-label     { font-size: var(--kg-body-base); color: var(--kg-text-muted); }
.kg-disclaimer{ font-size: var(--kg-body-sm); line-height: 1.45; color: var(--kg-text-muted); }

/* ── Раскладка ─────────────────────────────────────────────────────────── */
.kg-container { width: 100%; max-width: var(--kg-container); margin: 0 auto; padding: 0 var(--kg-space-5); }
.kg-section   { padding: var(--kg-section-y) 0; background: var(--kg-white); }
.kg-section--alt { background: var(--kg-surface-alt); }
.kg-stack   { display: flex; flex-direction: column; gap: var(--kg-space-5); }
.kg-row     { display: flex; flex-wrap: wrap; gap: var(--kg-space-5); }
.kg-grid-3  { display: grid; gap: var(--kg-space-6); grid-template-columns: repeat(auto-fit, minmax(min(320px,100%), 1fr)); }
.kg-grid-4  { display: grid; gap: var(--kg-space-5); grid-template-columns: repeat(auto-fit, minmax(min(260px,100%), 1fr)); }

@media (max-width: 900px) {
  :root { --kg-display-xl: 34px; --kg-display-lg: 26px; --kg-display-md: 22px; --kg-display-sm: 20px; --kg-section-y: 56px; }
}