@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-dark: 35 42 53;
  --color-main-blue: 58 114 182;
  --color-main-blue-light: 64 120 187;
  --color-black: 19 19 19;
  --color-grey: 110 115 119;
  --color-light: 247 248 250;
  --color-white: 255 255 255;
  --color-red: 201 53 53;
  --color-red-dark: 166 42 42;
  
  --color-h2-text: 92 104 122;

  --color-maintenance-accent: 255 190 46;
  --color-maintenance-bg: 250 243 209;

  --font-family-base: "Public Sans", Arial, Helvetica, sans-serif;

  --font-size-h1: 64px;
  --font-weight-h1: 700;

  --font-size-h2: 36px;
  --font-weight-h2: 300;

  --font-size-h3: 24px;
  --font-weight-h3: 700;

  --font-size-h4: 16px;
  --font-weight-h4: 700;

  --font-size-body: 16px;
  --font-weight-body: 400;

  --font-size-button: 16px;
  --font-weight-button: 600;

  --font-size-link: 16px;
  --font-weight-link: 700;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 72px;
  --space-10: 80px;
}

/* Generic inline link default (the "Link Text" style documented in
   STYLE_GUIDE.md) - a plain fallback for links with no other styling, e.g.
   one typed inline into a Basic HTML body field (Rich Text, Content Card's
   subtext, etc.). Loaded first (see fhfa_refreshed.libraries.yml), so every
   component's own class-scoped link rule elsewhere still wins on
   specificity - this only ever applies where nothing more specific does. */
a {
  color: rgb(var(--color-main-blue-light));
  font-weight: var(--font-weight-link);
  text-decoration: underline;
}

a:hover {
  color: rgb(var(--color-main-blue));
  text-decoration: none;
}