/* База: сброс, типографика, ссылки. Подключается после tokens.css */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--color-bg); }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
h1 { font-size: 62px; line-height: 1.02; }
h2 { font-size: 42px; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); text-wrap: pretty; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--signal); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
::selection { background: rgba(255, 106, 31, 0.35); }

.text-muted { color: color-mix(in srgb, var(--color-text) 74%, transparent); }
.text-signal { color: var(--signal); }
.on-dark { color: var(--on-dark); }
.on-dark-muted { color: var(--on-dark-muted); }

@media (max-width: 900px) {
  body { font-size: 16px; }
  h1 { font-size: 38px; }
  h2 { font-size: 30px; }
  h3 { font-size: 24px; }
}