:root {
  --brand-accent: #00ff9d;
  --brand-accent-100: #bfffe7;
  --brand-accent-200: #18cf89;
  --brand-accent-gradient: linear-gradient(
    to bottom,
    var(--brand-accent) 0%,
    var(--brand-accent-100) 50%
  );

  --brand-primary: #004442;
  --brand-primary-200: #71b1af;
  --brand-primary-300: #7aa9a8;
  --brand-primary-600: #166e6c;
  --brand-primary-700: #005856;
  --brand-primary-800: #003130;

  --text-muted: #808080;

  --border-radius-xs: 8px;
  --border-radius-sm: 16px;
  --border-radius-lg: 34px;

  --neutral-75: #f7f8fc;
  --neutral-100: #e5e8ed;
  --neutral-200: #ebf0f8;
  --neutral-300: #d7dde5;
  --neutral-800: #3f3f3f;

  --background-color: #fff;

  --green-color: #6bd81d;

  --error-color: #912330;
  --error-color-100: #f3c6cc;
  --error-color-200: #c70036;

  --success-color: #295832;
  --success-color-100: #c2e4c9;

  --info-color: #184379;
  --info-color-100: #e8f4ff;

  --warning-color: #7e4f0d;
  --warning-color-100: #fff6e8;

  --danger-color: #7c0d14;
  --danger-color-100: #ffe8eb;

  --header-height: 70px;
  --top-nav-height: 40px;
  --top-stack-height: calc(var(--header-height) + var(--top-nav-height));
  /* If we add a top nav, add it here the --top-nav-height*/
  --top-stack-height-with-page-nav: calc(
    var(--header-height) + var(--top-nav-height) * 2
  );
  --button-border-radius: 54px;
  --site-padding: 16px;
  --container-width: 1290px;
  --field-height: 46px;
  --block-space-sm: 26px;
  --block-space-md: 32px;
  --block-space-lg: 84px;
  --block-space-xl: 164px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  @media (min-width: 769px) {
    --field-height: 50px;
    --header-height: 90px;
  }
}