/* ==========================================================================
   VARIABLES — дизайн-токени
   Єдине джерело істини для кольору, типографіки, відступів і радіусів.
   Значення палітри та радіусів взяті з DESIGN.md без змін.
   Світла тема, темної версії немає (DESIGN.md).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     КОЛІР — базова палітра (DESIGN.md, не змінювати)
     --------------------------------------------------------------------- */
  --color-primary-900: #123b66;
  --color-primary-700: #175c9c;
  --color-primary-600: #1d6fb8;
  --color-primary-100: #eaf4fc;

  --color-accent-500: #f4c542;
  --color-accent-100: #fff7d6;

  /* Той самий застереж, що й для text-500: на білому 4.57:1, на тонованих
     підкладках менше 4.5. Успішний стан не позначати лише кольором. */
  --color-success-600: #18865a;
  --color-danger-600: #c63f3f;   /* на білому 5.02:1 */

  --color-text-900: #17212b;
  --color-text-700: #425466;
  /* УВАГА. Контраст text-500 до білого — 4.55:1, тобто AA з запасом у сотих.
     На --color-bg-soft він падає до 4.30:1, на --color-bg-cream до 4.32:1 —
     це вже провал AA. Вживати тільки на чистому білому, і не для тексту,
     який людина зобов'язана прочитати. Для приміток є .text-note (text-700). */
  --color-text-500: #66788a;

  --color-bg: #ffffff;
  --color-bg-soft: #f5f9fc;
  --color-bg-cream: #fbf7ee;
  --color-border: #dce7f0;

  /* Похідні відтінки — лише для станів hover/active та світлих підкладок.
     Отримані з базових кольорів, нових відтінків до палітри не додано. */
  --color-primary-800: #14508a;
  --color-primary-200: #cfe6f8;
  --color-danger-100: #fbeaea;
  --color-success-100: #e6f4ee;
  --color-border-strong: #c2d5e6;

  /* Семантичні псевдоніми — компоненти звертаються сюди, а не до палітри */
  --color-heading: var(--color-text-900);
  --color-body: var(--color-text-700);
  --color-muted: var(--color-text-500);
  --color-link: var(--color-primary-700);
  --color-link-hover: var(--color-primary-900);
  --color-focus: var(--color-primary-600);
  --color-on-primary: #ffffff;
  --color-on-accent: var(--color-primary-900);

  /* ---------------------------------------------------------------------
     ТИПОГРАФІКА
     --------------------------------------------------------------------- */
  --font-sans: "Manrope", Arial, sans-serif;

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

  /* Плавна шкала: нижня межа на 360px, верхня на 1280px.
     Одиниці в rem, щоб масштаб браузера і зум 200% працювали коректно. */
  --fs-h1: clamp(1.875rem, 1.337rem + 2.391vw, 3.25rem);   /* 30 → 52 */
  --fs-h2: clamp(1.5rem, 1.158rem + 1.522vw, 2.375rem);    /* 24 → 38 */
  --fs-h3: clamp(1.25rem, 1.152rem + 0.435vw, 1.5rem);     /* 20 → 24 */
  --fs-h4: clamp(1.125rem, 1.076rem + 0.217vw, 1.25rem);   /* 18 → 20 */
  --fs-lead: clamp(1.0625rem, 0.989rem + 0.326vw, 1.25rem);/* 17 → 20 */
  --fs-body: clamp(1rem, 0.976rem + 0.109vw, 1.0625rem);   /* 16 → 17 */
  --fs-sm: clamp(0.875rem, 0.851rem + 0.109vw, 0.9375rem); /* 14 → 15 */
  --fs-xs: 0.8125rem;                                      /* 13 */
  --fs-eyebrow: 0.8125rem;                                 /* 13 */

  /* 16px — мінімум для полів вводу, інакше iOS Safari зумить сторінку
     при фокусі. Фіксоване значення, у clamp() не загортаємо. */
  --fs-input: 1rem;

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-snug: 1.4;
  --lh-body: 1.6;
  --lh-relaxed: 1.7;

  --ls-tight: -0.02em;
  --ls-heading: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.08em;

  /* ---------------------------------------------------------------------
     ВІДСТУПИ — крок 4px
     --------------------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* Вертикальний ритм секцій і відступ між заголовком секції та вмістом */
  --space-section: clamp(3.5rem, 2.522rem + 4.348vw, 6rem);  /* 56 → 96 */
  --space-block: clamp(2rem, 1.652rem + 1.548vw, 2.875rem);  /* 32 → 46 */

  /* ---------------------------------------------------------------------
     СІТКА І КОНТЕЙНЕР
     --------------------------------------------------------------------- */
  --container-max: 75rem;      /* 1200 */
  --container-narrow: 46rem;   /* 736 — текстові сторінки, FAQ */
  --container-pad: clamp(1rem, 0.565rem + 1.935vw, 2rem); /* 16 → 32 */
  --grid-gap: clamp(1rem, 0.783rem + 0.968vw, 1.5rem);    /* 16 → 24 */

  /* Точки зламу зафіксовані тут довідково. У @media їх підставити не можна —
     значення продубльовані в responsive.css вручну. Змінювати парами. */
  --bp-sm: 30rem;    /* 480  */
  --bp-md: 48rem;    /* 768  */
  --bp-lg: 64rem;    /* 1024 */
  --bp-xl: 80rem;    /* 1280 */

  /* ---------------------------------------------------------------------
     РАДІУСИ (DESIGN.md)
     --------------------------------------------------------------------- */
  --radius-control: 14px;  /* input, button */
  --radius-card: 20px;
  --radius-hero: 28px;
  --radius-panel: 32px;
  --radius-pill: 999px;
  --radius-sm: 10px;       /* дрібні бейджі, іконкові підкладки */

  /* ---------------------------------------------------------------------
     ТІНІ — м'які, синюватий відтінок замість сірого
     --------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(18, 59, 102, 0.06);
  --shadow-sm: 0 2px 8px rgba(18, 59, 102, 0.06);
  --shadow-md: 0 8px 24px rgba(18, 59, 102, 0.08);
  --shadow-lg: 0 16px 48px rgba(18, 59, 102, 0.12);
  --shadow-header: 0 1px 0 var(--color-border), 0 4px 16px rgba(18, 59, 102, 0.05);

  /* ---------------------------------------------------------------------
     РОЗМІРИ ЕЛЕМЕНТІВ УПРАВЛІННЯ
     --------------------------------------------------------------------- */
  --control-height: 56px;      /* кнопки (UI-KIT.md) */
  --input-height: 56px;        /* у межах 54–58px (UI-KIT.md) */
  --tap-target: 44px;          /* мінімальна ціль дотику, WCAG 2.2 AA */
  /* responsive.css піднімає --header-height до --header-height-lg на ≥1024px.
     Саме через переозначення змінної, а не окремим правилом: від неї
     залежить scroll-padding-top, і зсув якорів має мінятися разом із хедером. */
  --header-height: 64px;
  --header-height-lg: 76px;

  /* ---------------------------------------------------------------------
     ФОКУС
     --------------------------------------------------------------------- */
  --focus-width: 3px;
  --focus-offset: 2px;
  --focus-ring: var(--focus-width) solid var(--color-focus);

  /* ---------------------------------------------------------------------
     АНІМАЦІЇ
     Знімаються глобально в animations.css при prefers-reduced-motion.
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --transition-colors: color var(--duration-fast) var(--ease-out),
                       background-color var(--duration-fast) var(--ease-out),
                       border-color var(--duration-fast) var(--ease-out);

  /* ---------------------------------------------------------------------
     Z-INDEX — увесь стек описаний тут, магічних чисел у компонентах немає
     --------------------------------------------------------------------- */
  --z-base: 1;
  --z-sticky-cta: 100;

  /* Підкладка мусить бути НИЖЧЕ за хедер, хоч це й виглядає нелогічно.
     Причина: .nav лежить усередині .header, а .header зі своїм z-index
     створює контекст накладання — тому z-index панелі порівнюється не з
     підкладкою, а лише з сусідами всередині хедера. Коли підкладка була
     вищою за хедер, вона накривала й саму панель: дотик до пункту меню
     потрапляв у підкладку, і меню закривалося замість переходу. */
  --z-drawer-overlay: 150;
  --z-header: 200;

  /* Обидва — всередині контексту .header, тому числа великі лише
     відносно одне одного. Бургер вище за панель навмисно: інакше
     висувна панель накриває хрестик, і закрити меню нічим. */
  --z-drawer: 310;
  --z-drawer-close: 320;

  --z-skip-link: 400;

  /* ---------------------------------------------------------------------
     БЕЗПЕЧНА ЗОНА (iPhone з вирізом, жестова смуга)
     --------------------------------------------------------------------- */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}