@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./manrope-regular.ttf') format('truetype');
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./manrope-semibold.ttf') format('truetype');
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./manrope-bold.ttf') format('truetype');
}

:root {
  --font-ui: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

html body { font-family: var(--font-ui); }
button, input, select, textarea { font-family: inherit; }

#app :is(.title, .page-title, .hero__title, .assortment__title) {
  font-weight: 600;
  letter-spacing: -.035em;
}

#app :is(.card__name, .card__title, .service-card__title) {
  font-weight: 600;
  letter-spacing: -.015em;
}

#app :is(.card__price, .stat__number, .total-price) {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}