/* Доступность (история 68): контраст, видимый фокус, крупные цели нажатия.
 * Файл подключается последним, поэтому переопределяет переменные темы.
 * Значения цветов — те же, что в `tz_a11y_text_colors()` (покрыты PHPUnit). */

:root {
  /* Приглушённый текст: #92A1A7 давал 2.67:1 на белом — читать было нельзя.
     Тот же холодный серый, только темнее: 5.37:1 на белом, 4.59:1 на плашке. */
  --tz-color-muted: #5E6D73;

  /* Фирменный сиреневый #816CD7 остаётся как есть: это утверждённая основа
     гаммы из design.md, и все заливки — кнопки, плашки, значки — сиреневые.
     Но мелкий текст этим цветом на светлом фоне даёт 4.15:1 и не читается,
     поэтому у текста свой токен — второй сиреневый той же палитры
     (в design.md он значится как primary-hover): 5.34:1 на белом. */
  --tz-color-primary-text: #6E58CC;
}

/* --- Сиреневый как ТЕКСТ ----------------------------------------------------- */
/* Заливки остаются фирменными (#816CD7) — здесь только те места, где сиреневым
   набран мелкий текст на светлом фоне: там 4.15:1 и 3.79:1, читать трудно.
   Значки, звёзды, маркеры и крупные акценты в заголовках не трогаем: для
   графики и крупного текста порог 3:1, и фирменный цвет его проходит. */
.tz-price__value,
.tz-price-list__price,
.tz-service-card__price,
.tz-service-card--big .tz-service-card__badge,
.tz-service-card--small .tz-service-card__badge,
.tz-badge,
.tz-person__position,
.tz-doctor-hero__position,
.tz-promo__conditions,
.tz-promo-card__conditions,
.tz-promo-card__badge,
.tz-home__badge,
.tz-home__badge span,
.tz-geo__thanks,
.tz-form__note,
.tz-form__check a,
.tz-modal__note a,
.tz-modal__phone,
.tz-service-cta__script,
.tz-review__avatar,
.tz-review-card__avatar {
  color: var(--tz-color-primary-text);
}

/* Наведение на ссылку тоже красится сиреневым — и тоже мелким текстом. */
a:hover,
.tz-price__link:hover,
.tz-review__more:hover,
.tz-review-card__more:hover,
.tz-person__link:hover,
.tz-person__link:focus-visible,
.tz-licenses__link:hover,
.tz-socials__link:hover,
.tz-page-hero__back:hover,
.tz-doctor-directions__link:hover,
.tz-doctor-directions__link:focus-visible {
  color: var(--tz-color-primary-text);
}

/* Две мелкие сиреневые плашки с белой подписью внутри: значок «детям и взрослым»
   на карточке услуги и выбранный фильтр направлений. Крупным шрифтом их не
   сделать — это подписи на 13–15 px, — поэтому у них заливка того же затемнённого
   сиреневого: белая подпись выходит на 5.34:1. Кнопки и крупные плашки это
   не трогает, они остаются фирменного цвета.
   Прозрачность у числа рядом с фильтром снята: она съедала контраст ещё раз. */
.tz-services__list .tz-service-card__badge,
.tz-chip.is-active {
  background: var(--tz-color-primary-text);
}

.tz-chip.is-active .tz-chip__count {
  opacity: 1;
}

/* --- Белая подпись на сиреневой заливке -------------------------------------- */
/* Фон кнопки остаётся фирменным #816CD7 (4.15:1 с белым). Для крупного
   полужирного текста порог WCAG — 3:1, и этого достаточно: подпись кнопки
   становится 19px/700 вместо 16px/500. Высота кнопки прежняя — 48px. */
.tz-btn--primary,
.tz-skip-link {
  font-size: 19px;
  font-weight: 700;
}

/* --- Фокус ------------------------------------------------------------------ */
/* Кольцо двойное: тёмное снаружи, белое внутри — видно и на светлой плашке,
   и на сиреневой кнопке, где одноцветная обводка сливалась с фоном. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--tz-color-brand-black, #000118);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
  border-radius: 4px;
}

/* Мышью фокус не рисуем, клавиатурой — обязательно. Браузеры без :focus-visible
   получают обычный контурный фокус, а не «ничего». */
@supports not selector(:focus-visible) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus {
    outline: 3px solid var(--tz-color-brand-black, #000118);
    outline-offset: 2px;
  }
}

/* Аккордеоны на <details>: стрелка сама по себе фокус не показывает. */
.tz-faq__item summary:focus-visible,
.tz-legal__item summary:focus-visible {
  outline: 3px solid var(--tz-color-brand-black, #000118);
  outline-offset: 2px;
}

/* Ссылка «Перейти к содержимому» — видна, как только на неё встал фокус. */
.tz-skip-link:focus,
.tz-skip-link:focus-visible {
  left: 0;
  outline: 3px solid var(--tz-color-brand-black, #000118);
  outline-offset: -3px;
}

/* --- Полосы прокрутки слайдеров -------------------------------------------- */
/* Слайдер листается и колесом, и пальцем, и клавишами: с клавиатуры в него
   надо попасть, поэтому у дорожки появляется фокус (проставляет a11y.js). */
.tz-slider__track:focus-visible {
  outline: 3px solid var(--tz-color-brand-black, #000118);
  outline-offset: 4px;
}

/* --- Мелочи ----------------------------------------------------------------- */
/* Человек попросил систему не анимировать — не анимируем. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}