:root {
  --color-1: #02051a;
  --color-2: #050829;
  --color-3: #ffffff;
  --color-4: #000000;
  --color-5: #9aa7ef;
  --font-family-1: "OptimaDisplay-Light", Helvetica, Arial, sans-serif;
  --font-family-2: "AkzidenzGrotesk", Helvetica, Arial, sans-serif;

  --header-bg-color: var(--color-1);
  --base-font-family: var(--font-family-2);
  --body-bg-color: var(--color-2);
  --action-btn-color: var(--color-3);
  --action-btn-txt-color: var(--color-4);
  --body-button-text-transform: uppercase;
  --body-visit-msg-color: var(--color-3);
  --body-visit-msg-font-family: var(--font-family-1);
  --body-panel-brand-invite-color: var(--color-3);
  --body-visit-msg-font-weight: 100;
  --body-brand-invite-font-family: var(--font-family-1);
  --body-brand-invite-font-weight: 100;
  --body-action-btn-font-weight: 700;
  --body-action-btn-letter-spacing: 0.15rem;

  --footer-bg-color: var(--color-1);
  --footer-txt-color: var(--color-5);
}

@font-face {
  font-family: "AkzidenzGrotesk";
  src: url("akzidenz-grotesk-w1g-bold.woff2") format("woff2");
  font-display: swap;
  font-style: bold;
  font-weight: 700;
}

@font-face {
  font-family: "AkzidenzGrotesk";
  src: url("akzidenz-grotesk-w1g-regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "OptimaDisplay-Light";
  src: url("OptimaDisplay-Light.woff2") format("woff2");
  font-display: swap;
}