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

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

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3 { font-weight: 640; letter-spacing: -.015em; }
h1 { font-size: clamp(32px, 4.5vw, 40px); line-height: 1.1; }
h2 { font-size: clamp(22px, 3vw, 26px); line-height: 1.23; }
h3 { font-size: 18px; line-height: 1.35; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
svg { display: block; }
dialog { color: inherit; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 14px; line-height: 1.45; }
.overline {
  color: var(--faint); font-size: 12px; line-height: 16px; font-weight: 560;
  letter-spacing: .07em; text-transform: uppercase;
}
.nowrap { white-space: nowrap; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Заголовок dialog получает программный фокус для скринридера, не рамку. */
.drawer [tabindex="-1"]:focus,
.focus-return:focus { outline: none !important; }

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