/* ==========================================================================
   Ol Bud Invest — дизайн-токени
   Єдине місце, де задаються кольори, типографіка та ритм сайту.
   ========================================================================== */

:root {
  /* --- Колір -------------------------------------------------------------
     Палітра знята безпосередньо з logo_olbudinvest.png. У логотипі немає
     жодного теплого тону — лише три холодні родини:

       напис ................. #0a1d22
       бірюзова частина кільця #203b40  #2a4345  #2d4148
       синя частина кільця ... #264c5c  #294f64
       сталево-сіра .......... #325058  #335159  #3e5662  #43585e

     Тому й на сайті теплого кольору немає. Роль акценту виконує найсиніша
     частина кільця, освітлена до потрібного контрасту. */

  --ink-950: #0a1d22; /* колір напису в логотипі */
  --ink-900: #10262c;
  --ink-800: #16323a;
  --ink-700: #203b40; /* найтемніша точка кільця */

  --steel-800: #264c5c;
  --steel-700: #294f64; /* найсиніша точка кільця */
  --steel-600: #33627c;
  --steel-500: #3e7899;
  --steel-400: #5b93b3;
  --steel-300: #8ab4cc;
  --steel-200: #a8c6d6;
  --steel-50: #eef4f7;

  --slate-600: #43585e; /* сіро-синя частина кільця */
  --slate-500: #54696f;
  --slate-300: #8b9ba0;

  --concrete-50: #f6f8f8;
  --concrete-100: #eceff0;
  --concrete-200: #dde2e4;
  --concrete-400: #a9b2b5;

  --white: #ffffff;

  /* Єдиний теплий колір на сайті — сітка деформаційних швів у hero.
     Лишається за рішенням замовника: вона добре лягла на фото
     готової підлоги і ніде більше не повторюється. */
  --seam: #ea7a1e;

  /* --- Семантичні ролі ---------------------------------------------------
     Компоненти звертаються лише до них. У темних секціях частина ролей
     перевизначається (див. нижче), тож той самий компонент лишається
     читабельним на обох тлах. */

  --bg: var(--concrete-50);
  --bg-alt: var(--white);
  --bg-dark: var(--ink-950);
  --surface: var(--white);

  --text: var(--ink-900);
  --text-muted: var(--slate-500);
  --border: var(--concrete-200);

  --accent: var(--steel-600); /* заливка кнопок і плашок — 6.6:1 з білим */
  --accent-text: var(--steel-600); /* акцентний текст — 6.2:1 на тлі сторінки */
  --accent-hover: var(--steel-700);
  --focus: var(--steel-600);

  --danger: #b3261e;

  /* --- Типографіка -------------------------------------------------------
     Geologica — заголовки: квадратний, «кресленицький» скелет.
     Inter — текст: еталонна екранна читабельність кирилиці.
     17px базового розміру — український текст довший за англійський. */

  --font-display: 'Geologica', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Заголовок героя навмисно не «на весь екран»: при 80px три рядки
     з'їдали 235px і на логотипи клієнтів місця вже не лишалося.
     56px усе ще великі, але дають фото дихати. */
  --fs-display: clamp(2.25rem, 4.2vw, 3.5rem);
  --fs-h1: clamp(2rem, 4.5vw, 3.5rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  --lh-tight: 1.08;
  --lh-heading: 1.2;
  --lh-body: 1.7;

  --track-display: -0.02em;
  --track-label: 0.14em; /* великі літери в мітках і кнопках */

  /* --- Ритм 4/8 ---------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Вертикальний ритм секцій. Один токен на весь сайт — усі екрани
     дихають однаково. 9vw давало 128px зверху й знизу, тобто 256px
     порожнечі між екранами на широкому моніторі: сторінка розтягувалася
     й вимагала зайвого скролу. */
  --section-y: clamp(3rem, 5vw, 4.75rem);
  /* Проміжок між підблоками всередині однієї секції (текст -> картки
     переваг -> чекліст -> підсумковий абзац). Менший за --section-y:
     той тримає ритм між секціями сторінки, а цей — усередині одного
     змістового блоку, де такий самий великий відступ читається як
     порожнеча, а не як пауза. */
  --block-y: clamp(1.75rem, 3vw, 2.75rem);

  /* --- Форма ------------------------------------------------------------- */
  /* Радіуси навмисно малі — «інженерна» естетика, не м'який SaaS. */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgb(10 29 34 / 0.06);
  --shadow: 0 2px 8px rgb(10 29 34 / 0.08);
  --shadow-lg: 0 12px 32px rgb(10 29 34 / 0.16);

  /* --- Сітка ------------------------------------------------------------- */
  --container: 76rem; /* 1216px */
  --container-narrow: 46rem; /* для суцільного тексту */
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* --- Рух --------------------------------------------------------------- */
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Шари -------------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 20;
  --z-header: 40;
  --z-overlay: 80;
  --z-modal: 100;
}

/* --- Темні поверхні --------------------------------------------------------
   Перевизначаємо ті самі ролі, а не дублюємо правила в кожному компоненті.
   Акцент тут світлішає: #33627c на майже чорному дав би 3.4:1. */

.section--dark,
.on-dark,
.cta,
.page-hero,
.site-header--overlay,
.site-footer,
.mobile-nav,
.lightbox {
  --bg: var(--ink-950);
  --surface: rgb(255 255 255 / 0.04);

  --text: #d7e3e8;
  --text-muted: var(--steel-200);
  --border: #1f3d46;

  --accent: var(--steel-500); /* заливка кнопки — 4.8:1 з білим */
  --accent-text: var(--steel-300); /* акцентний текст — 7.8:1 на ink-950 */
  --accent-hover: var(--steel-400);
  --focus: var(--steel-300);

  --danger: #ffb4ab;
}