/* ==========================================================================
   ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ
   Единственный источник правды по цвету, типографике и шкале отступов.
   При переносе на WordPress эти же значения уходят в theme.json.
   Менять цвета — только здесь.
   ========================================================================== */

:root {

  /* --- Фирменные цвета -----------------------------------------------------
     Один акцентный красный, без тональной шкалы: все состояния (ховер,
     нажатие, подложка) выводятся из него через color-mix.
     Синий и бирюзовый — из «цветовое решение сайт.docx».
     ---------------------------------------------------------------------- */
  --brand-red:  #ec3013;
  --brand-blue: #10256b;
  --brand-teal: #81d8d0;

  /* --- Нейтральные --------------------------------------------------------
     Тёплая «бумага» — как в утверждённом макете.
     ---------------------------------------------------------------------- */
  --paper: #f3f2f2;
  --ink:   #201e1d;

  /* --- Семантические роли -------------------------------------------------
     Вёрстка обращается ТОЛЬКО к этим переменным.
     ---------------------------------------------------------------------- */
  --color-bg:         var(--paper);
  --color-surface:    #eae9e9;   /* поля ввода, вторичные плашки */
  --color-text:       var(--ink);
  --color-text-muted: color-mix(in srgb, var(--ink) 78%, transparent);
  --color-text-faint: color-mix(in srgb, var(--ink) 62%, transparent);

  --color-accent:     var(--brand-red);
  --color-accent-ink: #ae1800;                                   /* тот же красный на светлом */
  --color-accent-hov: color-mix(in srgb, var(--brand-red) 82%, #000);     /* ховер кнопки */
  --color-accent-act: color-mix(in srgb, var(--brand-red) 68%, #000);     /* нажатие */
  --color-accent-bg:  color-mix(in srgb, var(--brand-red) 8%, var(--paper)); /* подложка выделенной карточки */

  --color-brand:      var(--brand-blue);
  --color-brand-bg:   color-mix(in srgb, var(--brand-blue) 7%, var(--paper));

  --color-divider:  color-mix(in srgb, var(--ink) 40%, transparent);
  --color-hairline: color-mix(in srgb, var(--ink) 18%, transparent);

  --color-on-dark:       var(--paper);
  --color-on-dark-muted: color-mix(in srgb, var(--paper) 76%, transparent);

  /* --- Типографика --------------------------------------------------------
     Archivo — с кириллицей (v2, Omnibus-Type). 800 — заголовки, 400 — текст.
     ---------------------------------------------------------------------- */
  --font-heading: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    800;

  --fs-h1:     clamp(40px, 5.4vw, 74px);
  --fs-h1-sub: clamp(36px, 4.4vw, 60px);   /* h1 внутренних страниц */
  --fs-h2:     clamp(28px, 3.2vw, 36px);
  --fs-h3:     20px;
  --fs-lead:   17px;                        /* вводные абзацы и описания секций */
  --fs-base:   15px;
  --fs-sm:     14px;
  --fs-xs:     13px;
  --fs-xxs:    12px;

  --lh-tight: 1.04;
  --lh-head:  1.25;
  --lh-base:  1.65;

  --ls-tight:  -0.03em;
  --ls-head:   -0.02em;
  --ls-wide:    0.08em;   /* надзаголовки капсом */

  /* --- Шкала отступов --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-22: 88px;

  /* --- Сетка --- */
  --container: 1280px;
  --gutter: clamp(20px, 3.6vw, 48px);
  --section-y: clamp(44px, 5vw, 64px);

  /* --- Скругления: модернистская система — прямые углы --- */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;

  /* --- Тени --- */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, var(--ink) 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, var(--ink) 22%, transparent);

  /* --- Прочее --- */
  --rule: 2px;                    /* толщина фирменной линейки-разделителя */
  --header-h: 68px;
  --transition: 160ms ease;
}