/* WAH HR - дизайн-токены. Источник: design/tokens.css
   Шрифт подключается локально в base.css, без внешних CDN. */

/* WAH HR - дизайн-токены
   Источник: логотип (алый #FE0819) + разбор референсов heaad.ru, ancor.ru,
   kaus-group.ru, hr-profi.ru. Все текстовые пары проверены на контраст WCAG AA. */

:root {
  /* ---------- Бренд ---------- */
  --brand-red: #FE0819;          /* цвет логотипа. Только логотип и крупная графика */
  --brand-red-ink: #C80D1B;      /* тот же тон, затемнённый до контраста 5.95 - ссылки и текст */

  /* ---------- Акцент (действия) ---------- */
  --accent-50:  #FFF1F1;
  --accent-100: #FFDEDF;
  --accent-500: #D91020;         /* фон кнопок. Белый текст на нём: контраст 5.19 - AA */
  --accent-600: #B00D18;         /* hover */
  --accent-700: #96070F;         /* active */

  /* ---------- Нейтральные ---------- */
  --ink-900: #14181D;            /* основной текст, шапка, подвал. 17.8 на белом */
  --ink-700: #3D4752;            /* подзаголовки, вторичный текст. 9.45 */
  --ink-500: #5A6672;            /* подписи, мета. 5.87 - минимум для мелкого текста */
  --ink-300: #8A96A3;            /* только иконки и disabled, не для текста */

  --line:      #DCE1E6;          /* границы блоков - основа визуального языка */
  --line-soft: #E9EDF1;          /* разделители внутри блока */

  --bg:        #FFFFFF;
  --bg-muted:  #F5F7F9;          /* фон чередующихся секций */
  --bg-dark:   #14181D;          /* тёмные секции, подвал */

  /* ---------- Статусы (используются редко) ---------- */
  --ok:    #0E7A47;
  --warn:  #A66A00;
  --error: #C0261C;

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

  --fs-display: 56px;   --lh-display: 1.08;  /* H1 на первом экране */
  --fs-h1: 44px;        --lh-h1: 1.12;
  --fs-h2: 32px;        --lh-h2: 1.18;
  --fs-h3: 22px;        --lh-h3: 1.28;
  --fs-lg: 18px;        --lh-lg: 1.55;       /* лид-абзац */
  --fs-base: 16px;      --lh-base: 1.6;
  --fs-sm: 14px;        --lh-sm: 1.5;
  --fs-xs: 13px;        --lh-xs: 1.45;       /* мета, сноски */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-tight: -0.02em;   /* заголовки от 32px */
  --ls-normal: 0;
  --ls-caps: 0.08em;     /* надзаголовки капсом */

  /* ---------- Сетка и отступы ---------- */
  --container: 1200px;
  --gutter: 24px;
  --col: 12;

  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 40px;  --sp-8: 48px;
  --sp-9: 64px;  --sp-10: 80px; --sp-11: 96px;

  --section-y: 96px;         /* вертикальный ритм секций, десктоп */
  --section-y-mobile: 56px;

  /* ---------- Формы блоков ---------- */
  --r-0: 0;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;              /* основной радиус карточек */
  --r-pill: 999px;           /* теги, плашки */

  --border: 1px solid var(--line);
  --border-strong: 1px solid #C9D1D8;

  /* Тени почти не используются: границы вместо теней */
  --shadow-pop: 0 8px 24px rgba(20, 24, 29, .10);   /* только для выпадающих меню и модалок */

  /* ---------- Прочее ---------- */
  --focus: 0 0 0 3px rgba(217, 16, 32, .28);
  --transition: 140ms ease;
}

@media (max-width: 768px) {
  :root {
    --fs-display: 34px;
    --fs-h1: 28px;
    --fs-h2: 24px;
    --fs-h3: 19px;
    --fs-lg: 17px;
    --section-y: var(--section-y-mobile);
    --container: 100%;
    --gutter: 16px;
  }
}