/**
 * Reset, типографика, утилиты. Только var(--...), см. tokens.css.
 */

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

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  transition: background var(--transition), color var(--transition);
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

small, .text-caption {
  font-size: var(--fs-caption);
}

.text-micro {
  font-size: var(--fs-micro);
}

.text-hero {
  font-family: var(--font-mono);
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.text-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.text-secondary {
  color: var(--text-secondary);
}

.text-light {
  color: var(--text-light);
}

.text-accent {
  color: var(--accent);
}

.text-danger {
  color: var(--danger);
}

img, svg {
  display: block;
  max-width: 100%;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

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

a:hover {
  color: var(--accent);
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── Контейнер экрана ── */
.screen {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
  padding-left: var(--screen-padding);
  padding-right: var(--screen-padding);
}

/* ── Утилиты компоновки ── */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.flex-none { flex: none; }
.text-center { text-align: center; }
.hidden { display: none; }

.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }

/* ── Доступность ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}