@charset "UTF-8";
/**
 * Ventolux - дизайн-токени.
 * Джерело: Figma «Ventolux (Fin)», get_variable_defs. Руками сюди нічого не дописувати -
 * тільки те, що реально є змінною у макеті. Хекси в модулях заборонені, тільки ці змінні.
 */
:root {
  /* --- Колір: бренд --- */
  --c-primary: #173da6; /* Blue(primary)/600 */
  --c-primary-50: #edf2ff; /* Blue(primary)/50 */
  --c-primary-hover: #0f2f85; /* похідний: наведення на primary, у Figma стану немає */
  --c-accent: #ff3f13; /* Orange/Orange */
  --c-accent-dark: #dc2e0b; /* Orange/Dark orange */
  --c-accent-light: #ffe9e4; /* Orange/Light orange */
  --c-accent-notif: #ff8157; /* Orange/Notif orange */
  /* --- Колір: статуси --- */
  --c-green: #4bab02; /* Green/Green */
  --c-green-dark: #448016; /* Green/Dark green */
  --c-green-notif: #7fcb43; /* Green/Notif green */
  --c-green-light: #f7fff0; /* Green/Light green */
  --c-ocean: #018bdc; /* Ocean/Ocean */
  /* --- Колір: текст і фони --- */
  --c-text: #212121; /* Text/Black */
  --c-text-muted: #767676; /* Text/Dark grey */
  --c-grey: #c3c3c3; /* Text/Grey */
  --c-grey-light: #ebebeb; /* Text/Light grey */
  --c-white: #ffffff; /* Text/White */
  --c-bg-grey: #f4f4f4; /* Text/Bg grey */
  /* --- Відступи: шкала 4px --- */
  --space-1: 4px;
  --space-1-5: 6px; /* Spacing/1_5 */
  --space-2: 8px; /* Size/2 */
  --space-3: 12px; /* Size/3 */
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px; /* Size/6 */
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  /* --- Типографіка --- */
  --font-base: 'Onest', -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* letterSpacing у Figma заданий у відсотках від кегля - тут уже переведено в px */
  --t-h1: 400 48px/80px var(--font-base);
  --t-h1-ls: 0.48px;
  --t-h2: 400 32px/40px var(--font-base);
  --t-h2-ls: 0;
  --t-h3: 700 32px/40px var(--font-base);
  --t-h3-ls: 0.64px;
  --t-h4: 400 24px/32px var(--font-base); /* заголовок блоку в довідці */
  --t-h4-ls: 0.48px;
  --t-subtitle: 400 20px/30px var(--font-base);
  --t-subtitle-ls: 0;
  --t-body: 400 16px/24px var(--font-base);
  --t-body-medium: 500 16px/24px var(--font-base);
  --t-body-ls: 0;
  --t-subbody: 400 14px/16px var(--font-base);
  --t-subbody-medium: 500 14px/16px var(--font-base);
  --t-subbody-ls: 0.28px;
  --t-caption: 400 12px/14px var(--font-base);
  --t-caption-medium: 500 12px/14px var(--font-base);
  --t-caption-ls: 0.12px;
  --t-button: 500 16px/20px var(--font-base);
  --t-button-ls: 0.32px;
  /* --- Радіуси (у макеті кути майже скрізь прямі) --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;
  /* --- Розміри керуючих елементів --- */
  --control-h: 44px; /* кнопка, іконка-кнопка */
  --control-h-sm: 32px; /* компактний select */
  --icon-md: 20px;
  --icon-sm: 16px;
  /* --- Тіні --- */
  --shadow-md: 0 4px 8px 0 rgba(24, 24, 27, 0.1), 0 0 1px 0 rgba(24, 24, 27, 0.3);
  /* тінь картки з макета (Figma: 0 8 b8 #18274b0a + 0 4 b6 #18274b0f) */
  --shadow-card: 0 8px 8px rgba(24, 39, 75, 0.04), 0 4px 6px rgba(24, 39, 75, 0.06);
  /* --- Рух: єдиний ритм для всіх модулів --- */
  --dur-fast: 150ms; /* дрібні стани: колір, підкреслення */
  --dur-base: 220ms; /* основні мікровзаємодії */
  --dur-slow: 320ms; /* поява блоків, розкриття акордеона */
  --dur-exit: 140ms; /* вихід коротший за вхід */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* вхід */
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19); /* вихід */
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); /* натиск, поява картки */
  --stagger: 40ms; /* крок затримки в списках */
  --lift: -4px; /* підйом картки на hover */
  /* --- Сітка --- */
  --container: 1440px; /* ширина макета ПК */
  --container-pad: 16px; /* бокові поля на мобільній */
}

@media (min-width: 1024px) {
  :root {
    --container-pad: 70px; /* бокові поля макета 1440 */
  }
}