/* ==========================================================================
   Токены сайта: цвета, шрифт, шкала размеров текста, отступы, скругления, тени.
   Все значения дизайна живут только здесь — styles.css берёт их через var(--…).
   Подключается в <head> перед styles.css.
   ========================================================================== */
:root{
  /* ---------- Цвета ----------
     Палитра 60-30-10: светло-серая база + графит (60), пыльно-синий — второстепенный акцент (30),
     коралл (10) — только кнопки «Записаться» и плавающая WhatsApp */
  --ink:#2A2E33; --ink-2:#6B6B70; --ink-3:#6B6B70;
  --bg:#F7F7F8; --bg-2:#EDEDF0; --card:#FFFFFF; --line:#DDDDE2;
  --white:#fff;
  --blue:#5B7A8C; --blue-hover:#4A6572; --blue-ink:#4A6572;
  --blue-wash:rgba(91,122,140,.10); --blue-wash-2:rgba(91,122,140,.16); --blue-line:rgba(91,122,140,.45);
  --cta:#D14F2E; --cta-hover:#B8431F;
  --warn:#B3261E; --warn-bg:#FCEEED;
  --logo-bg:#52738C;                       /* фон сцены с логотипом — собственный синий логотипа */
  --scrollbar:#C6C6CD;
  --glass-bg:rgba(247,247,248,.8);         /* шапка-«стекло» */
  --ink-ring:rgba(42,46,51,.12);           /* тонкий контур цветных точек */

  /* Белое на тёмном: футер, лайтбокс, точки карусели поверх фото */
  --on-dark:rgba(255,255,255,.85);         /* основной текст */
  --on-dark-2:rgba(255,255,255,.62);       /* второстепенный текст, неактивные точки */
  --on-dark-line:rgba(255,255,255,.22);    /* линии и рамки */
  --on-dark-fill:rgba(255,255,255,.14);    /* плашки и кнопки */
  --on-dark-fill-hover:rgba(255,255,255,.26);

  /* Затемнения поверх страницы */
  --overlay:rgba(20,22,25,.55);            /* под окном выбора медсестры */
  --overlay-strong:rgba(20,22,25,.92);     /* лайтбокс */
  --scrim:rgba(20,22,25,.78);              /* подсказка поверх карты */

  /* Цвета слоёв на схеме «Виды инъекций» — сняты с самой картинки */
  --inj-skin:#F7B6C9; --inj-fat:#FFD787; --inj-muscle:#5F99DE; --inj-epi:#D0798C;

  /* ---------- Шрифт и шкала текста ----------
     rem = 16px. Основной текст страницы — --fs (18/19px). */
  --font:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fs:18px;
  --text-xs:.88rem;                        /* 14px — подписи, плашки с именами, низ футера */
  --text-sm:.95rem;                        /* 15px — пояснения, бейджи, теги */
  --text-md:1rem;                          /* 16px — текст в карточках и списках */
  --text-lg:1.08rem;                       /* 17px — кнопки, абзацы покрупнее */
  --text-xl:1.18rem;                       /* 19px — большие кнопки, телефоны в меню */
  --text-lead:clamp(1.15rem,1.05rem + .5vw,1.4rem);      /* подзаголовки секций */
  --text-phone:clamp(1.35rem,1.1rem + 1vw,1.55rem);      /* крупные номера телефонов */
  --h1:clamp(2.4rem,1.15rem + 3.1vw,3.65rem);
  --h2:clamp(2.15rem,1.3rem + 2.7vw,3.3rem);
  --h3:clamp(1.4rem,1.2rem + .6vw,1.65rem);
  --h4:1.22rem;

  /* ---------- Отступы и размеры раскладки ---------- */
  --space-section:clamp(48px,7.5vw,96px);  /* сверху и снизу у каждой секции */
  --space-block:clamp(40px,6vw,64px);      /* между крупными блоками внутри секции */
  --space-head:clamp(28px,4.5vw,48px);     /* под заголовком секции */
  --space-card:clamp(22px,3vw,30px);       /* внутренний отступ карточек */
  --header-h:64px;
  --container:1200px;
  --gutter:20px;

  /* ---------- Скругления ---------- */
  --r-xl:28px; --r-lg:22px; --r-md:16px; --r-sm:12px; --r-xs:6px;
  --r-pill:999px;

  /* ---------- Тени ---------- */
  --shadow-sm:0 10px 28px -14px rgba(42,46,51,.16);
  --shadow-md:0 14px 34px -18px rgba(42,46,51,.18);
  --shadow-lg:0 28px 54px -26px rgba(42,46,51,.24);
  --shadow-header:0 10px 28px -22px rgba(42,46,51,.18);
  --shadow-menu:0 24px 48px -20px rgba(42,46,51,.32),0 4px 14px -6px rgba(42,46,51,.14);
  --shadow-modal:0 30px 70px -24px rgba(20,22,25,.45);
  --shadow-stage:0 30px 60px -32px rgba(35,55,68,.55);
  --shadow-logo:0 14px 18px rgba(20,34,43,.28);
  --shadow-cta:0 14px 34px -18px rgba(209,79,46,.55);
  --shadow-photo:0 30px 80px -20px rgba(0,0,0,.6);
  --shadow-dot:0 1px 3px rgba(0,0,0,.25);

  /* ---------- Прочее ---------- */
  --glass-blur:14px;                       /* стекло — только шапка */
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:720px){:root{--gutter:32px;--fs:19px;--header-h:84px}}
@media (min-width:1100px){:root{--gutter:48px}}