@font-face {
  font-family: "Manrope";
  src: url("./assets/fonts/manrope-v20-cyrillic_latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("./assets/fonts/manrope-v20-cyrillic_latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --shared-bg: #fafafa;
  --shared-ink: #09090b;
  --shared-graphite: #18181b;
  --shared-muted: #5f6268;
  --shared-soft: #eef0f2;
  --shared-accent: #80654f;
  --shared-accent-dark: #5d4635;
  --shared-accent-on-dark: #d4b99e;
  --shared-accent-soft: rgba(128, 101, 79, 0.18);
  --shared-radius: 6px;
}

html {
  scroll-behavior: smooth;
}

body,
button,
input,
textarea {
  font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
}

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

.skip-link {
  position: absolute;
  left: 20px;
  top: -120px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: var(--shared-radius);
  color: #fff;
  background: var(--shared-graphite);
}

.skip-link:focus {
  top: 16px;
}

.button {
  min-height: 48px;
  touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}