/**
 * SALT brand webfonts.
 *
 * This file lives in `public/` and is linked directly from `index.html` rather
 * than imported through webpack. That is deliberate: the `url()` paths below
 * are root-relative, and CRA's css-loader would otherwise try to resolve them
 * as JS modules and fail the build. Serving it statically also means the font
 * filenames stay unhashed, so the `<link rel="preload">` hints in index.html
 * keep matching, and the faces start downloading before the JS bundle parses.
 *
 * Font-family names and utility classes mirror the SALT website exactly, so
 * components can move between the two codebases unchanged.
 *
 * - HAL Timezone (serif)  -> headings, display, accents
 * - Oblong Sans Medium    -> sans display, buttons, subheadings
 * - Roboto Flex           -> body copy
 */

@font-face {
  font-family: 'HALTimezoneRegular';
  src: url('/assets/fonts/HALTimezone-Regular-subset.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HALTimezoneItalic';
  src: url('/assets/fonts/HALTimezone-Italic-subset.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'HALTimezoneMonoRegular';
  src: url('/assets/fonts/HALTimezone-MonoRegular-subset.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OblongSansMedium';
  src: url('/assets/fonts/Oblong_Sans-Medium-subset.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RobotoFLEX';
  src: url('/assets/fonts/roboto-flex-subset.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

/* Utility classes, mirroring the website's API. Used by saltFontStyles. */
.HALTimezoneRegular {
  font-family: 'HALTimezoneRegular';
  font-style: normal;
}

.HALTimezoneItalic {
  font-family: 'HALTimezoneItalic';
}

.HALTimezoneMonoRegular {
  font-family: 'HALTimezoneMonoRegular';
  font-style: normal;
}

.OblongSansMedium {
  font-family: 'OblongSansMedium';
  font-style: normal;
}

.RobotoFLEX {
  font-family: 'RobotoFLEX';
  font-style: normal;
}