@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --beautier-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
strong,
small,
label {
  font-family: var(--beautier-font) !important;
}

body {
  background: #faf9f8;
  color: #171719;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.site-header,
.mobile-menu,
.button,
button,
.salon-card,
.option-card,
.profile-services article,
.booking-card,
.feature-card {
  transition:
    transform 280ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 280ms cubic-bezier(.22, 1, .36, 1),
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease;
}

@media (hover: hover) {
  .salon-card:hover,
  .option-card:hover,
  .profile-services article:hover,
  .booking-card:hover,
  .feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 46px rgba(44, 24, 35, .09);
  }

  .button:hover,
  button:hover {
    transform: translateY(-1px);
  }
}

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