:root {
  /* ─── Цвета ─── */
  --color-text-primary:   #1A1A1A;
  --color-text-secondary: #374151;
  --color-text-tertiary:  #6B7280;
  --color-border:         #E5E7EB;
  --color-surface:        #F5F5F5;
  --color-bg:             #FAFAFA;

  --color-accent:         #EA580C;
  --color-accent-bg:      #FFEDE5;
  --color-accent-hover:   #C2410C;

  --color-placeholder:    #9CA3AF;

  /* ─── Типографика — Десктоп ─── */
  --font-family: 'Manrope', sans-serif;

  --text-h1:       56px;
  --text-h2:       40px;
  --text-h3:       24px;
  --text-body-l:   20px;
  --text-body:     16px;
  --text-caption:  14px;
  --text-micro:    13px;

  --lh-heading:    1.2;
  --lh-h1:         1.15;
  --lh-h3:         1.3;
  --lh-body:       1.5;
  --lh-caption:    1.4;

  --fw-regular:    400;
  --fw-semibold:   600;

  /* Специальные размеры */
  --text-price:        56px;
  --text-case-num:     72px;   /* цифры на обложках кейсов, экран 5 */
  --text-hero-metric:  36px;   /* цифры метрик в hero-секции, экран 1 */

  /* Метки-заголовки разделов */
  --text-label:    13px;
  --ls-label:      0.078em; /* ~6% */

  /* ─── Контейнер ─── */
  --container-max:     1200px;
  --container-padding: 32px;

  /* ─── Отступы между экранами ─── */
  --gap-section: 96px;

  /* ─── Отступы внутри экрана ─── */
  --gap-h2-sub:      16px;
  --gap-sub-content: 40px;
  --gap-blocks-lg:   48px;
  --gap-blocks-md:   32px;
  --gap-items:       12px;
  --gap-items-lg:    24px;
  --gap-label:       16px;

  /* ─── Кнопки ─── */
  --btn-height:      56px;
  --btn-padding-x:   32px;
  --btn-radius:      8px;
  --btn-font-size:   16px;

  /* ─── Поля формы ─── */
  --input-height:    56px;
  --input-padding-x: 16px;
  --input-radius:    8px;

  /* ─── Скругления ─── */
  --radius-btn:      8px;
  --radius-card:     12px;
  --radius-image:    12px;
  --radius-pdf:      8px;
  --radius-badge:    3px;

  /* ─── Тени ─── */
  --shadow-document: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-header:   0 1px 0 rgba(0, 0, 0, 0.05);

  /* ─── Хедер ─── */
  --header-height:   88px;
  --header-z:        100;

  /* ─── Z-индексы ─── */
  --z-header:  100;
  --z-cookies: 150;
  --z-modal:   200;

  /* ─── Переходы ─── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 300ms ease;
}

/* ─── Дополнения для страницы «Смысловой каркас» ─── */
:root {
  /* Цвета — производные палитры */
  --color-white:          #FFFFFF;
  --color-btn-hover:      #2C2C2C;
  --color-dark-card:      rgba(255, 255, 255, 0.06);
  --color-dark-border:    rgba(255, 255, 255, 0.08);
  --color-dark-chip:      rgba(255, 255, 255, 0.10);
  --color-dark-divider:   rgba(255, 255, 255, 0.12);

  /* Типографика — значения из шкалы дизайн-системы */
  --text-body-m:     18px;  /* выделенный абзац, вопрос FAQ */
  --text-statement:  32px;  /* финальный тезис экрана */
  --text-quote:      28px;  /* цитата-страх клиента */
  --text-case-title: 20px;  /* заголовок карточки кейса */
  --text-step-num:   56px;  /* «1.», «2.» в исследовании */
  --text-step-dot:   20px;  /* цифра в кружке этапа */
  --lh-statement:    1.25;

  /* Скругления */
  --radius-xl:    20px;
  --radius-lg:    16px;
  --radius-pill:  999px;

  /* Отступы секций и карточек */
  --section-pad:     var(--gap-section);
  --card-pad-lg:     36px;
  --card-pad:        32px;
  --gap-section-inner: var(--gap-blocks-lg);

  /* Аккордеон */
  --acc-duration: 200ms;
}