/* ============================================================
   YOMI Profit — базовый слой веба.
   Того, чего нет в дизайн-системе: сброс, поведение документа,
   доступность. Ни одного «сырого» цвета/размера — только токены.
   ============================================================ */

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

html {
  /* iOS Safari: запрет автоматического увеличения шрифта при повороте */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

p {
  margin: 0;
}

a {
  color: var(--link);
  text-decoration: none;
}

/* Цифры денег и часов — моноширинные по ширине знака: суммы в колонке
   не «пляшут» при обновлении партиала */
.y-num,
input[inputmode="decimal"],
input[inputmode="numeric"],
time {
  font-variant-numeric: tabular-nums;
}

/* Фокус виден всегда и только с клавиатуры: контрастное кольцо.
   Дизайн-система требует видимый фокус — в вендорском мокапе его нет */
/* Радиус кольцу НЕ задаём: браузер повторяет скругление самого элемента,
   а фиксированные 6px рисовали вокруг поля с радиусом 10px «коробку»
   с другим скруглением — это и выглядело криво */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Заголовок экрана после подмены фрагмента получает фокус программно —
   чтобы скринридер объявил новый экран, а Tab продолжил обход с него
   (см. static/js/miniapp.js). Это служебный фокус, а не «человек пришёл
   сюда клавиатурой»: рамку вокруг заголовка рисовать не нужно.
   На кнопках и полях `tabindex="-1"` не ставится, их фокус остаётся видимым */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}

/* Движение — ответ на действие пользователя; при системном запросе
   «меньше движения» оно исчезает полностью */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Служебный класс для текста, который читает только скринридер */
.y-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}