@font-face {
  font-family: 'OpenSans-Medium';
  src: url("/assets/open-sans/OpenSans-Medium-a3a15e06.ttf") format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenSans-Regular';
  src: url("/assets/open-sans/OpenSans-Regular-2a212be2.ttf") format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ABCWhyte-Medium';
  src: url("/assets/abc-whyte/ABCWhyte-Medium-0d2c2d64.woff2") format('woff2'),
    url("/assets/abc-whyte/ABCWhyte-Medium-b6f40591.woff") format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ABCWhyte-Regular';
  src: url("/assets/abc-whyte/ABCWhyte-Regular-f1b5acb6.woff2") format('woff2'),
    url("/assets/abc-whyte/ABCWhyte-Regular-8302e5e8.woff") format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik Cond';
  src: url("/assets/graphik/GraphikCondensed-Semibold-eeacbb49.otf") format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonts */
  --market-content-fonts: 'ABCWhyte-Regular', -apple-system, 'OpenSans-Regular', Roboto;
  --market-header-fonts: 'Graphik Cond', -apple-system, Roboto;

  /* Colors */
  --white-color: #fff;
  --dark-blue-color: #0C73BD;
  --light-blue-color: #199BFA;
  --light-yellow-color: #e6ffa0;
  --dark-yellow-color: #adbf78;

  --background-gray-color: #fafafa;
  --background-white-color: #ffffff;

  --text-black-color: #282828;
  --text-gray-color: #666666;

  --border-light-gray-color: #f3f3f3;

  /* Dimensions */
  --mobile-header-height: 56px;
  --desktop-header-height: 72px;

  /* Spacing */
  --side-spacing: 1rem;

  /* Radius */
  --border-radius: 1.25rem;

  /* Margins */
  --standard-margin: 2rem;
  --large-margin: 3rem;

  --box-shadow: 0px 5px 30px 0px rgba(155, 155, 155, 0.20);
}

.background-gray-color {
  background-color: var(--background-gray-color);
}

/* Accessibility utility class for screen reader only content */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}