/* ЛКК «Сенситив» — дизайн-система редизайна.
   Направление: швейцарский минимализм (риск доступности низкий),
   спокойный циан + медицинский зелёный, Manrope / Noto Sans.
   Тёмная тема поддержана: у медицинских сайтов заметна доля
   читателей статей вечером с телефона. */

/* ─────────────────────────  1. Токены  ───────────────────────── */

:root {
  color-scheme: light;

  /* поверхности */
  --ground: #FFFFFF;
  --panel: #FFFFFF;
  --sunken: #F2FAFC;
  --tint: #ECFEFF;

  /* текст: на белом даёт 10.4:1 */
  --ink: #10394A;
  --ink-soft: #3D5C69;
  --muted: #566E78;

  /* линии */
  --line: #D7E7EC;
  --line-soft: #E9F3F6;
  --line-strong: #9FB9C2;

  /* фирменный циан. --brand только для заливок и крупного текста
     (3.5:1 на белом), для ссылок и мелкого текста — --brand-ink (4.8:1) */
  --brand: #0891B2;
  --brand-ink: #0E7490;
  --brand-dark: #164E63;
  --brand-wash: #E0F5FA;

  /* зелёный — целевое действие «записаться» */
  --go: #059669;
  --go-ink: #047857;
  --go-wash: #E7F7F0;

  --warn: #B45309;
  --danger: #DC2626;

  --on-brand: #FFFFFF;
  --on-go: #FFFFFF;

  /* Шапка-строка и подвал тёмные в обеих темах, поэтому у них отдельные
     токены: на --brand-dark они в тёмной теме превращались в светлую
     плашку со светлым же текстом. */
  --deep: #164E63;
  --on-deep: #DFF3F8;
  --on-deep-soft: #9FC6D2;

  /* шрифт заголовков обязан поддерживать кириллицу: у Figtree её нет,
     и весь русский текст рисовался системной подменой */
  --sans: 'Manrope', system-ui, 'Segoe UI', Roboto, sans-serif;
  --text: 'Noto Sans', system-ui, 'Segoe UI', Roboto, sans-serif;

  --maxw: 1200px;
  --measure: 68ch;
  --gutter: 20px;
  --radius: 12px;
  --radius-sm: 8px;

  /* шкала отступов, плотность «стандартная» */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
  --s7: 64px;

  --shadow: 0 1px 2px rgba(16, 57, 74, .06), 0 4px 16px rgba(16, 57, 74, .07);
  --shadow-lg: 0 2px 6px rgba(16, 57, 74, .08), 0 16px 40px rgba(16, 57, 74, .12);

  --header-h: 64px;
  --bar-h: 62px;
}

/* Тема по умолчанию — светлая, независимо от настроек системы: для
   медицинского сайта белый фон читается как норма, а тёмный — как
   что-то развлекательное. Тёмная включается только кнопкой в шапке
   и запоминается в localStorage. */

[data-theme='dark'] {
  color-scheme: dark;

  --ground: #0C1417;
  --panel: #121D21;
  --sunken: #0F191D;
  --tint: #102227;

  --ink: #E6F1F4;
  --ink-soft: #B6CCD3;
  --muted: #94AEB6;

  --line: #23383F;
  --line-soft: #1A2A30;
  --line-strong: #4A6670;

  --brand: #22D3EE;
  --brand-ink: #5BE1F5;
  --brand-dark: #A5F3FC;
  --brand-wash: #10333C;

  --go: #10B981;
  --go-ink: #34D399;
  --go-wash: #0E2E24;

  --warn: #FBBF24;
  --danger: #F87171;

  --on-brand: #04252E;
  --on-go: #04251B;

  --deep: #08171C;
  --on-deep: #CFE6ED;
  --on-deep-soft: #8FAEB8;

  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .4);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .55);
}

/* ─────────────────────────  2. Основа  ───────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.62 var(--text);
  letter-spacing: .002em;
  overflow-x: hidden;
  /* место под липкую панель действий на мобильных */
  padding-bottom: env(safe-area-inset-bottom);
}

img { max-width: 100%; height: auto; }
svg { display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.22;
  letter-spacing: -.014em;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}

h1 { font-size: clamp(28px, 4.4vw, 44px); font-weight: 700; }
h2 { font-size: clamp(23px, 3vw, 31px); font-weight: 700; }
h3 { font-size: clamp(19px, 2.2vw, 23px); font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }
h5, h6 { font-size: 16px; font-weight: 600; }

p { margin: 0 0 var(--s3); }

a {
  color: var(--brand-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { color: var(--brand-dark); }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s5) 0;
}

/* Экранным читалкам — да, глазам — нет */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brand-dark);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ─────────────────────────  3. Кнопки  ───────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  /* минимум 44px по высоте — на старом сайте 26 элементов были мельче */
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: 600 16px/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn svg { width: 20px; height: 20px; flex: none; }

.btn--go { background: var(--go); color: var(--on-go); }
.btn--go:hover { background: var(--go-ink); color: var(--on-go); }

.btn--brand { background: var(--brand); color: var(--on-brand); }
.btn--brand:hover { background: var(--brand-ink); color: var(--on-brand); }

.btn--ghost {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--sunken); color: var(--ink); }

.btn--lg { min-height: 54px; padding: 14px 26px; font-size: 17px; }
.btn--full { width: 100%; }