/* Версия для слабовидящих (ГОСТ Р 52872-2019).
   Работает через токены: страница обязана брать цвета только из переменных
   --c-* и шрифты из --font-*, размеры — в rem/em. Тогда схемы ниже
   перекрашивают весь сайт без правки компонентов. */

/* ---------- Панель ---------- */
.a11y-panel {
  position: relative;
  z-index: 1000;
  background: var(--c-bg);
  color: var(--c-ink);
  border-bottom: 3px solid var(--c-ink);
  font-family: var(--font-text);
}
.a11y-panel[hidden] { display: none; }
.a11y-panel__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: flex-end;
}
.a11y-group { display: flex; flex-direction: column; gap: 0.35rem; }
.a11y-group--tools { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.a11y-group__title { font-size: 0.875rem; font-weight: 700; }
.a11y-group__row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.a11y-opt {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.75rem;
  border: 2px solid var(--c-ink);
  border-radius: 0.375rem;
  background: var(--c-bg);
  color: var(--c-ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.a11y-opt[aria-pressed="true"] { background: var(--c-ink); color: var(--c-bg); }
.a11y-opt:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.a11y-opt--wide { padding-inline: 1rem; }
.a11y-opt--s1 { font-size: 1rem; }
.a11y-opt--s2 { font-size: 1.25rem; }
.a11y-opt--s3 { font-size: 1.5rem; }
/* Образцы цветовых схем — всегда в своих цветах, чтобы было видно, что выбираешь */
.a11y-opt--bw { background: #fff !important; color: #000 !important; border-color: #000 !important; }
.a11y-opt--wb { background: #000 !important; color: #fff !important; border-color: #fff !important; box-shadow: 0 0 0 2px #000; }
.a11y-opt--blue { background: #9dd1ff !important; color: #063462 !important; border-color: #063462 !important; }
.a11y-opt--beige { background: #f7f3d6 !important; color: #4d4b43 !important; border-color: #4d4b43 !important; }
.a11y-opt--green { background: #3b2716 !important; color: #a9e44d !important; border-color: #a9e44d !important; }
.a11y-opt--bw[aria-pressed="true"],
.a11y-opt--wb[aria-pressed="true"],
.a11y-opt--blue[aria-pressed="true"],
.a11y-opt--beige[aria-pressed="true"],
.a11y-opt--green[aria-pressed="true"] { outline: 3px solid var(--c-ink); outline-offset: 2px; }

/* ---------- Размер шрифта ---------- */
html[data-a11y="on"] { font-size: 112.5%; }
html[data-a11y="on"][data-a11y-size="2"] { font-size: 137.5%; }
html[data-a11y="on"][data-a11y-size="3"] { font-size: 162.5%; }

/* ---------- Цветовые схемы ---------- */
html[data-a11y="on"][data-a11y-scheme="bw"] {
  --c-bg: #fff; --c-surface: #fff; --c-surface-2: #fff; --c-ink: #000; --c-ink-2: #000; --c-line: #000;
  --c-brand: #fff; --c-on-brand: #000; --c-accent: #000; --c-on-accent: #fff; --c-focus: #000; --c-danger: #000; --c-on-danger: #fff;
}
html[data-a11y="on"][data-a11y-scheme="wb"] {
  --c-bg: #000; --c-surface: #000; --c-surface-2: #000; --c-ink: #fff; --c-ink-2: #fff; --c-line: #fff;
  --c-brand: #000; --c-on-brand: #fff; --c-accent: #fff; --c-on-accent: #000; --c-focus: #fff; --c-danger: #fff; --c-on-danger: #000;
}
html[data-a11y="on"][data-a11y-scheme="blue"] {
  --c-bg: #9dd1ff; --c-surface: #9dd1ff; --c-surface-2: #9dd1ff; --c-ink: #063462; --c-ink-2: #063462; --c-line: #063462;
  --c-brand: #9dd1ff; --c-on-brand: #063462; --c-accent: #063462; --c-on-accent: #9dd1ff; --c-focus: #063462; --c-danger: #063462; --c-on-danger: #9dd1ff;
}
html[data-a11y="on"][data-a11y-scheme="beige"] {
  --c-bg: #f7f3d6; --c-surface: #f7f3d6; --c-surface-2: #f7f3d6; --c-ink: #4d4b43; --c-ink-2: #4d4b43; --c-line: #4d4b43;
  --c-brand: #f7f3d6; --c-on-brand: #4d4b43; --c-accent: #4d4b43; --c-on-accent: #f7f3d6; --c-focus: #4d4b43; --c-danger: #4d4b43; --c-on-danger: #f7f3d6;
}
html[data-a11y="on"][data-a11y-scheme="green"] {
  --c-bg: #3b2716; --c-surface: #3b2716; --c-surface-2: #3b2716; --c-ink: #a9e44d; --c-ink-2: #a9e44d; --c-line: #a9e44d;
  --c-brand: #3b2716; --c-on-brand: #a9e44d; --c-accent: #a9e44d; --c-on-accent: #3b2716; --c-focus: #a9e44d; --c-danger: #a9e44d; --c-on-danger: #3b2716;
}

/* В режиме доступности убираем всё, что мешает читать */
html[data-a11y="on"] body { background: var(--c-bg); color: var(--c-ink); }
html[data-a11y="on"] *,
html[data-a11y="on"] *::before,
html[data-a11y="on"] *::after {
  animation: none !important;
  transition: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  filter: none;
}
html[data-a11y="on"] .decor,
html[data-a11y="on"] [data-decor] { display: none !important; }
html[data-a11y="on"] [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }

/* ---------- Изображения ---------- */
html[data-a11y="on"][data-a11y-img="gray"] img,
html[data-a11y="on"][data-a11y-img="gray"] picture,
html[data-a11y="on"][data-a11y-img="gray"] video,
html[data-a11y="on"][data-a11y-img="gray"] .media { filter: grayscale(1) !important; }
html[data-a11y="on"][data-a11y-img="off"] img,
html[data-a11y="on"][data-a11y-img="off"] picture,
html[data-a11y="on"][data-a11y-img="off"] video,
html[data-a11y="on"][data-a11y-img="off"] .media { display: none !important; }

/* ---------- Интервалы ---------- */
html[data-a11y="on"] body { line-height: 1.6; }
html[data-a11y="on"][data-a11y-spacing="2"] body { letter-spacing: 0.06em; word-spacing: 0.14em; line-height: 1.8; }
html[data-a11y="on"][data-a11y-spacing="3"] body { letter-spacing: 0.12em; word-spacing: 0.28em; line-height: 2; }
html[data-a11y="on"][data-a11y-spacing="2"] :is(h1, h2, h3, h4),
html[data-a11y="on"][data-a11y-spacing="3"] :is(h1, h2, h3, h4) { letter-spacing: inherit; }

/* ---------- Шрифт ---------- */
html[data-a11y="on"][data-a11y-font="serif"] {
  --font-display: Georgia, "PT Serif", "Times New Roman", serif;
  --font-text: Georgia, "PT Serif", "Times New Roman", serif;
}

/* Ссылки в режиме доступности — всегда подчёркнуты */
html[data-a11y="on"] a { text-decoration: underline !important; text-underline-offset: 0.15em; }
html[data-a11y="on"] :focus-visible { outline: 3px solid var(--c-focus) !important; outline-offset: 3px !important; }
