/* Дизайн-токени. Джерело — Figma, файл jnQi5OiCBnfR3kcJUuIjUt.
   Міняти значення тільки тут. Ніде більше не писати кольори й розміри числами. */

:root {
  /* --- Колір --- */
  --c-accent: #3381ff;
  --c-accent-hover: #1f6deb;                       /* синя кнопка на наведенні */
  --c-accent-soft: rgba(51, 129, 255, 0.06);       /* фон другорядної кнопки */
  --c-accent-soft-hover: rgba(51, 129, 255, 0.12); /* та сама кнопка на наведенні */
  --c-text: #878b91;
  --c-text-muted: rgba(135, 139, 145, 0.6);
  --c-on-accent: #ffffff;

  --c-bg: #ffffff;
  --c-surface: #f7f7f7;   /* світла плашка */
  --c-surface-2: #e8eaed; /* фон навігаційних пігулок */
  --c-placeholder: #d9d9d9;

  /* Кола під головами. Значення взяті з самих відеофайлів (191 і 233),
     щоб на краях при зменшенні не підмішувався чужий тон. */
  --c-head-mykyta: #bfbfbf;
  --c-head-olena: #e9e9e9;

  /* --- Типографіка --- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking: -0.02em; /* −2% наскрізно */

  --fs-body: 1.25rem;  /* 20px десктоп */
  --fs-title: 2.25rem; /* 36px заголовок кейсу */

  --lh-tight: 1.2;  /* заголовки, кнопки */
  --lh-body: 1.3;   /* абзаци */
  --lh-loose: 2.2;  /* списки з широким кроком */

  /* --- Сітка --- */
  --page-max: 1512px;
  --gutter: 24px;
  --margin: 120px;
  --cols: 12;

  /* --- Вертикальний ритм --- */
  --section-gap: 96px;     /* між блоками кейсу */
  --section-gap-lg: 196px; /* між секціями головної */

  /* --- Форма --- */
  --radius: 6px;
  --radius-pill: 500px;

  /* --- Кнопки --- */
  --btn-h: 48px;
  --btn-pad-x: 22px;
  --btn-fs: 1.25rem; /* 20px */
  --btn-min-w: 152px; /* CTA у макеті фіксовані 152; навігаційні пігулки — по контенту */

  /* Висота хедера: падінги 48×2 + кнопка 48 */
  --header-h: 144px;

  /* --- Шари --- */
  --z-header: 100;
  --z-bar: 200;
  --z-popup: 300;

  /* --- Рух --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 240ms;
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --margin: 16px;
    --cols: 4;

    --fs-body: 1rem;      /* 16px */
    --fs-title: 1.875rem; /* 30px */

    --btn-h: 44px;
    --btn-pad-x: 20px;
    --btn-fs: 1rem;
    --btn-min-w: 122px;
    --header-h: 32px; /* на головній у мобільному хедері нічого не лишається, тільки падінги */
  }
}

/* Користувач попросив систему прибрати анімації — прибираємо рух, лишаємо кліпання голів */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}