/* =========================================================================
   Токены сайта Оксаны Дезери-Ботвиной.
   Собраны из значений, которые реально стоят на слоях макета (страница Dev),
   а не из стилей и переменных файла (их 114, собраны ИИ-плагином).
   Резина: 390 → 1440 (мобильный → десктоп), 1440 → 1920 (HD, только то, что в HD меняется).
   ========================================================================= */
:root {
  /* ---- Цвет: по назначению ---- */
  --c-ink: #000000;            /* основной текст */
  --c-navy-950: #002030;       /* логотип, пункты меню, текст на розовой кнопке, вкладки */
  --c-navy-700: #01283b;       /* иконки, обводки кнопок, текст аккордеонов */
  --c-navy-600: #003a56;       /* главная кнопка, точки слайдера, дуга шагов */
  --c-navy-500: #005c89;       /* подписи «Що відчувається» */
  --c-steel: #9eb7c2;          /* бегунок прокрутки биографии */
  --c-bg: #f6f6f6;             /* фон страницы */
  --c-blush: #f6eff2;          /* фон секции «Простір практики», карточки отзывов */
  --c-blush-2: #f2ecef;        /* шапка страницы политики */
  --c-ice: #eef8ff;            /* карточки отзывов, наведение на контурные кнопки */
  --c-white: #ffffff;
  --c-pink: #f1bcd2;           /* кнопка на тёмном и в меню */
  --c-footer: #192f3f;         /* фон футера */
  --c-on-dark: #eeeeee;        /* ссылки в футере */
  --c-line: rgba(0, 0, 0, .1); /* разделители, обводки карточек и плашек */
  --c-glass: rgba(246, 246, 246, .7);
  --c-white-30: rgba(246, 246, 246, .3);
  --c-dot-track: rgba(0, 58, 86, .2);

  /* состояния (UI-кит) */
  --c-primary-hover: #01283b;
  --c-pink-hover: #ed89b3;
  --c-link-hover: #025881;
  --c-link-hover-dark: #fd6ba9;
  --c-outline-hover-dark: #f697bf;
  --c-glass-hover: #f4e1ea;
  --c-accordion-hover: #024464;
  --c-focus: #ff7eb5;
  --c-focus-dark: #ff96c3;

  /* ---- Шрифты ---- */
  --f-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Резина ---- */
  --fl: calc((100vw - 390px) / 1050);   /* 0 на 390, 1 на 1440 */
  --hd: calc((100vw - 1440px) / 480);   /* 0 на 1440, 1 на 1920 */

  /* ---- Типографика ---- */
  --t-h1: clamp(36px, calc(36px + 14 * var(--fl)), 50px);          /* H1 и заголовки секций, 100% */
  --t-h2: 26px;                                                     /* H2, Light 110%, ls 1% */
  --t-h2-s: clamp(22px, calc(22px + 4 * var(--fl)), 26px);          /* H2 в биографии и шагах: 22 на мобильном */
  --t-h3: 20px;                                                     /* вопросы FAQ, пункты мобильного меню, 120%, ls 2% */
  --t-body: 16px;                                                   /* Text M, Light 150% */
  --t-small: 14px;                                                  /* Text S, Light 150% */
  --t-btn: 14px;                                                    /* Button, Regular 110%, ls 1% */
  --t-btn-l: 20px;                                                  /* Button L, ссылки футера */
  --t-eyebrow: 12px;                                                /* Eyebrow, Regular 120%, ls 4% */

  /* ---- Отступы ---- */
  --margin: clamp(16px, calc(16px + 44 * var(--fl)), 60px);          /* поле страницы */
  --max: 1800px;                                                     /* ширина контента на HD */
  --gutter: 24px;
  --sec-120: clamp(60px, calc(60px + 60 * var(--fl)), 120px);        /* 120 ↔ 60 */
  --sec-140: clamp(70px, calc(70px + 70 * var(--fl)), 140px);        /* 140 ↔ 70 */
  --sec-80: clamp(40px, calc(40px + 40 * var(--fl)), 80px);          /* 80 ↔ 40 */
  --sec-32: clamp(24px, calc(24px + 8 * var(--fl)), 32px);           /* 32 ↔ 24 */
  --gap-48: clamp(32px, calc(32px + 16 * var(--fl)), 48px);          /* 48 ↔ 32 */
  --gap-64: clamp(48px, calc(48px + 16 * var(--fl)), 64px);          /* 64 ↔ 48 */
  --gap-24: clamp(20px, calc(20px + 4 * var(--fl)), 24px);           /* 24 ↔ 20 */
  --pad-card: clamp(20px, calc(20px + 4 * var(--fl)), 24px);

  /* ---- Скругления, тени, эффекты ---- */
  --r-pill: 999px;
  --r-box: 8px;
  --r-card: 32px 32px 0 32px;  /* карточка отзыва: правый нижний угол острый */
  --blur: blur(20px);
  --sh-bio: 0 24px 60px rgba(25, 47, 63, .1);
  --sh-widget: 0 18px 60px rgba(0, 32, 48, .15);
  --sh-menu: 0 4px 4px rgba(241, 188, 210, .35);

  /* ---- Движение (по Figma Make) ---- */
  --ease-out: cubic-bezier(.2, .75, .25, 1);
  --dur: .35s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: .01ms; }
}