/* Основа: сброс, текст по умолчанию, ссылки, фокус, служебные классы, иконки, плейсхолдер.
   Только смысловые токены (tokens.css, слой 2). */

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

html { scroll-behavior: smooth; scroll-padding-top: var(--scroll-offset); }

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font: 400 var(--fs-body)/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--blue);
  overflow-x: clip;
}

::selection { background: var(--blue-tint); color: var(--blue-ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
main:focus { outline: none; }

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

a {
  color: inherit;
  text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--thin);
  transition: color .2s, text-decoration-color .2s;
}
a:hover, a:focus-visible { color: var(--blue); text-decoration-color: currentColor; }

h1, h2, h3 { font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; }
[hidden] { display: none !important; }

/* ---------- Цифры: JetBrains Mono — только цифры ---------- */

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 400; letter-spacing: -.02em; }
/* единица и запятая внутри моноширинной цифры — из Fira: «21,6 ₽», а не «21 , 6 ₽» */
.num .u, .num .cm { font-family: var(--sans); letter-spacing: 0; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.nw { white-space: nowrap; }

/* ---------- Доступность ---------- */

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  padding: 10px 16px;
  background: var(--ink); color: var(--paper);
  font-weight: 600; text-decoration: none;
}
.skip:focus, .skip:hover { top: 12px; color: var(--paper); }

/* ---------- Иконки: спрайт в разметке, размер — модификатором ---------- */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 22px; height: 22px; flex: none; }
.ic--arrow { width: 26px; height: 13px; vertical-align: middle; }
.ic--to    { width: 20px; height: 10px; vertical-align: 2px; }
.ic--down  { width: 12px; height: 16px; vertical-align: -3px; }
.ic--up    { width: 12px; height: 16px; vertical-align: -3px; }
.ic--out   { width: 14px; height: 14px; vertical-align: -1px; }
.ic--back  { transform: scaleX(-1); }
/* стрелка в ссылке и кнопке сдвигается на наведение и фокус */
:is(a, button):is(:hover, :focus-visible) > .ic--arrow:not(.ic--back) { transform: translateX(5px); }
.ic--arrow { transition: transform .35s var(--ease); }

/* ---------- Плейсхолдер: место под данные владельца ---------- */

/* «[цена]», «[срок]»: черновик, а не ошибка и не действие — графит, курсив, пунктир; Fira даже на месте цифры */
.tbd {
  display: inline-block; padding: 1px 8px;
  border: 1px dashed var(--graphite);
  color: var(--graphite);
  font: italic 400 var(--fs-small)/1.35 var(--sans);
  white-space: nowrap;
}

/* ---------- Без движения ---------- */

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