/* =========================================================
   FONTS
========================================================= */

/* AKTIV GROTESK */

@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('../fonts/aktiv-grotesk/AktivGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('../fonts/aktiv-grotesk/AktivGrotesk-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('../fonts/aktiv-grotesk/AktivGrotesk-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}


/* P22 */

@font-face {
  font-family: 'P22 Mackinac Pro';
  src: url('../fonts/mackinac/P22MackinacPro-Book_25.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'P22 Mackinac Pro';
  src: url('../fonts/mackinac/P22MackinacPro-Medium_26.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'P22 Mackinac Pro';
  src: url('../fonts/mackinac/P22MackinacPro-BookItalic_15.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}



/* =========================================================
   ROOT
========================================================= */

:root {

  /* COLORS */

  --color-bg: #F2F1EC;
  --color-light: #FFFFFF;
  --color-dark: #000000;

  --color-text: #212121;
  --color-muted: #6F6F6F;

  --color-card: rgba(242, 241, 236, 0.82);

  /* TYPOGRAPHY */

  --font-sans: 'Aktiv Grotesk', Arial, sans-serif;
  --font-serif: 'P22 Mackinac Pro', Georgia, serif;

  /* LAYOUT */

  --container-width: 1512px;
  --container-padding: 40px;

  --header-height: 154px;
}