@font-face {
  font-family: Gentleman;
  font-weight: 400;
  font-style: "normal";
  src: url("/fonts/Gentleman/Gentleman400-Light.woff2") format("woff2"),
    url("/fonts/Gentleman/Gentleman400-Light.woff") format("woff");
}

@font-face {
  font-family: Gentleman;
  font-weight: 700;
  font-style: bold;
  src: url("/fonts/Gentleman/Gentleman800-Bold.woff2") format("woff2"),
    url("/fonts/Gentleman/Gentleman800-Bold.woff") format("woff");
}

:root {
  /* Names colors */
  --color--white: #ffffff;
  --color--light-grey: #f4f4f4;
  --color--dark-grey: #5c6063;

  /* Theme colors */
  --color--brand: #05253a;

  /* Fonts */
  --font: "Gentleman", sans-serif;

  /* Border Radius */
  --border-radius: 5px;
  --border-radius--button: 2rem;

  /* Filters */
  --drop-shadow: drop-shadow(0px 3px 16px rgba(0, 0, 0, 0.25));

  /* Button colors */
  --button-bg--primary: var(--color--brand);
  --button-text--primary: var(--color--white);
  --button-icon--primary: var(--color--white);
  --button-bg--white: var(--color--white);
  --button-text--white: var(--color--brand);
  --button-icon--white: var(--color--brand);
  --button-bg--grey: var(--color--light-grey);
  --button-text--grey: var(--color--dark-grey);
  --button-icon--grey: var(--color--brand);
  --button-bg--dark-grey: var(--color--dark-grey);
  --button-text--dark-grey: var(--color--white);
  --button-icon--dark-grey: var(--color--white);
}