@font-face {
  font-family: "ABCMonumentGrotesk";
  src: url("../fonts/ABCMonumentGrotesk-Bold.eot");
  src: url("../fonts/ABCMonumentGrotesk-Bold.eot?#iefix") format("embedded-opentype"),
      url("../fonts/ABCMonumentGrotesk-Bold.woff2") format("woff2"),
      url("../fonts/ABCMonumentGrotesk-Bold.woff") format("woff"),
      url("../fonts/ABCMonumentGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "ABCMonumentGrotesk";
  src: url("../fonts/ABCMonumentGrotesk-Medium.eot");
  src: url("../fonts/ABCMonumentGrotesk-Medium.eot?#iefix") format("embedded-opentype"),
      url("../fonts/ABCMonumentGrotesk-Medium.woff2") format("woff2"),
      url("../fonts/ABCMonumentGrotesk-Medium.woff") format("woff"),
      url("../fonts/ABCMonumentGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "ABCMonumentGrotesk";
  src: url("../fonts/ABCMonumentGrotesk-Regular.eot");
  src: url("../fonts/ABCMonumentGrotesk-Regular.eot?#iefix") format("embedded-opentype"),
      url("../fonts/ABCMonumentGrotesk-Regular.woff2") format("woff2"),
      url("../fonts/ABCMonumentGrotesk-Regular.woff") format("woff"),
      url("../fonts/ABCMonumentGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "MTGDisplayBeta2.0";
  src: url("../fonts/MTGDisplayBeta2.0-Regular.eot");
  src: url("../fonts/MTGDisplayBeta2.0-Regular.eot?#iefix") format("embedded-opentype"),
      url("../fonts/MTGDisplayBeta2.0-Regular.woff2") format("woff2"),
      url("../fonts/MTGDisplayBeta2.0-Regular.woff") format("woff"),
      url("../fonts/MTGDisplayBeta2.0-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}


:root {
  /* Swatch Colors */
  --transparent: transparent;
  --dark-900: #000000;
  --dark-900-faded: rgba(0, 0, 0, 0.2);
  --dark-800: #1C1C1C;
  --light-200: #EBEBEB;
  --light-100: #FFFFFF;
  --light-100-faded: rgba(255, 255, 255, 0.2);
  --brand: #FF1919;
  --brand-secondary: #2A0B35;
  --brand-text: var(--brand-secondary);
  --burgundy: #4D0808;
  --crimson: #8C0E0E;
  --coral: #FF8787;
  --blush: #FFD1D1;
  --petal: #FFEEEE;
  --violet: #4C3255;
  --lilac: #A69CED;
  --lavender: #ACA0B0;
  --mauve: #D4CED7;
  --mist:#F0EDF1;

  /* Theme Colors */

  --theme-background: var(--light-100);
  --theme-background-secondary: var(--mauve);
  --theme-text: var(--brand-text);
  --theme-border: var(--dark-900-faded);
  --theme-accent: var(--brand);
  --theme-accent-secondary: var(--violet);

  /* Button Colors */
  --btn-primary-bg: var(--lilac);
  --btn-primary-border: var(--lilac);
  --btn-primary-text: var(--brand-text);
  --btn-primary-hover-bg: var(--theme-text)
  --btn-primary-hover-border: var(--theme-text);
  --btn-primary-hover-text: var(--theme-background);

  --btn-secondary-bg: var(--light-100);
  --btn-secondary-border: var(--light-100);
  --btn-secondary-text: var(--brand-secondary);
  --btn-secondary-hover-bg: var(--theme-text);
  --btn-secondary-hover-border: var(--theme-text);
  --btn-secondary-hover-text: var(--theme-background);

  /* Sizes - Border */
  --border-stroke: 0.09375rem;
  --radius-main: 1.25rem;
  --radius-rounded: 99999px;

  /* Sizes - Site */
  --site-padding-horizontal: 3rem;
  --site-padding-vertical: 3rem;
  --site-gutter: 1rem;
  --site-max-width: 1440px;

  /* Sizes - Spacing */
  --spacing-0: 0;
  --spacing-25: 0.25rem;
  --spacing-50: 0.5rem;
  --spacing-75: 0.75rem;
  --spacing-100: 1rem;
  --spacing-125: 1.25rem;
  --spacing-150: 1.5rem;
  --spacing-175: 1.75rem;
  --spacing-200: 2rem;
  --spacing-250: 2.5rem;
  --spacing-300: 3rem;
  --spacing-312: 3.125rem;
  --spacing-337: 3.375rem;
  --spacing-400: 4rem;
  --spacing-412: 4.125rem;
  --spacing-500: 5rem;
  --spacing-550: 5.5rem;
  --spacing-625: 6.25rem;
  --spacing-1250: 12.5rem;
  
  /* Section - Height */
  --section-height-full: 100vh;

  /* Sizes - Icons */
  --icon-xs: 1.5rem;
  --icon-sm: 2rem;
  --icon-md: 4rem;
  --icon-lg: 5rem;

  /* Typography */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Typography - Font Family */
  --font-primary: "ABCMonumentGrotesk", sans-serif;
  --font-secondary: "MTGDisplayBeta2.0", sans-serif;
  
  /* Typography - Font Size */

  --font-display: 7.5rem;
  --font-display-line-height: 0.80;
  --font-display-letter-spacing: 0%;

  --font-h1: 4rem;
  --font-h1-line-height: 100%;
  --font-h1-letter-spacing: 0%;

  --font-h2: 3.5rem;
  --font-h2-line-height: 100%;
  --font-h2-letter-spacing: 0%;

  --font-h3: 3rem;
  --font-h3-line-height: 110%;
  --font-h3-letter-spacing: 0%;

  --font-h4: 2rem;
  --font-h4-line-height: 130%;
  --font-h4-letter-spacing: 0%;

  --font-h5: 1.5rem;
  --font-h5-line-height: 130%;
  --font-h5-letter-spacing: 0%;

  --font-h6: 1.25rem;
  --font-h6-line-height: 130%;
  --font-h6-letter-spacing: 0%;

  --font-body-lg: 1.75rem;
  --font-body-lg-line-height: 120%;
  --font-body-lg-letter-spacing: 0%;

  --font-body-main: 1.25rem;
  --font-body-main-line-height: 120%;
  --font-body-main-letter-spacing: 0%;

  --font-body-sm: 1rem;
  --font-body-sm-line-height: 120%;
  --font-body-sm-letter-spacing: 0%;

  --font-eyebrow: 0.875rem;
  --font-eyebrow-line-height: 100%;
  --font-eyebrow-letter-spacing: 5%;

  --font-links: 1.125rem;
  --font-links-line-height: 120%;
  --font-links-letter-spacing: 0%;

  --font-button: 1.125rem;
  --font-button-line-height: 100%;
  --font-button-letter-spacing: 0%;

  --font-display-mb: 3.75rem;
  --font-h1-mb: 3rem;
  --font-h2-mb: 3rem;
  --font-h3-mb: 2.25rem;
  --font-h4-mb: 2rem;
  --font-h5-mb: 1.5rem;
  --font-body-lg-mb: 1.5rem;
  --font-body-main-mb: 1rem;
  --font-body-sm-mb: 0.875rem;
  --font-eyebrow-mb: 0.75rem;
  --font-links-mb: 1rem;
  --font-button-mb: 1rem;
}