:root {
  --color-1: #fafafa;
  --color-2: #ffffff;
  --color-3: #000000;
  --color-4: #666666;
  --font-family: "CliniqueHelveticaNeue", sans-serif;

  --header-bg-color: var(--color-2);

  --body-bg-color: var(--color-1);
  --action-btn-color: var(--color-2);
  --action-btn-txt-color: var(--color-3);
  --body-visit-msg-color: var(--color-3);
  --body-panel-brand-invite-color: var(--color-4);
  --base-font-family: var(--font-family);
  --body-visit-msg-font-weight: 700;
  --body-brand-invite-font-weight: 300;
  --body-action-btn-font-weight: 100;
  --body-action-btn-font-size: 1.1rem;
  --body-action-btn-border-color: 1px solid var(--color-4);
  --footer-bg-color: var(--color-2);
  --footer-txt-color: var(--color-4);
}

@font-face {
  font-family: "CliniqueHelveticaNeue";
  src: url("HelveticaNeue-Regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "CliniqueHelveticaNeue";
  src: url("HelveticaNeue-Bold.woff2") format("woff2");
  font-display: swap;
  font-style: bold;
  font-weight: 700;
}
@font-face {
  font-family: "CliniqueHelveticaNeue";
  src: url("HelveticaNeue-Light.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 300;
}