@theme {
  --color-*: initial;
  --color-transparent: 'transparent';
  --color-current: 'currentColor';
  --color-white: #fff;
  --color-primary: #008754;
  --color-accent: #f8b322;
  --color-grey: #f3f2ed;
  --color-dark: #103b27;
  --color-secondary: #f8b322;
  --color-lightPrimary: #e1eee9;
  --color-lightSecondary: #ffe1b2;
  --color-body: #000000;
  --color-light: #ffe1b2;
  --color-green: #429e70;
  --color-success: #429e70;
  --color-error: #b11737;
  --color-border: #cecece;
  --font-sans: 'Montserrat', sans-serif;

  --breakpoint-xs: 520px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-xmd: 900px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  --radius: 5px;
  --radius-md: 8px;
  --radius-lg: 30px;
  --radius-xl: 60px;

  --text-base: 0.9375rem; /* 15px */
  --text-base--line-height: 1.2rem;
  --text-xl: 1.25rem; /* 20px  */
  --text-xl--line-height: 1.2rem;
  --text-lg--line-height: 1.4rem;

  --shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.16);

  --background-image-check: url('../images/bg-check.svg');
  --background-image-dash: linear-gradient(
    to right,
    #7b8c9b75 8px,
    rgba(255, 255, 255, 0) 0%
  );

  --animate-burger-top: burgerTop 0.5s ease-in-out forwards;
  --animate-burger-bottom: burgerBottom 0.5s ease-in-out forwards;
  --animate-burger-top-reverse: burgerTopReverse 0.5s ease-in-out forwards;
  --animate-burger-bottom-reverse: burgerBottomReverse 0.5s ease-in-out forwards;

  @keyframes burgerTop {
    0% {
      transform: translateY(0) rotate(0);
    }
    50% {
      transform: translateY(8px) rotate(0);
    }
    100% {
      transform: translateY(8px) rotate(-45deg);
    }
  }
  @keyframes burgerBottom {
    0% {
      transform: translateY(0) rotate(0);
    }
    50% {
      transform: translateY(-8px) rotate(0);
    }
    100% {
      transform: translateY(-8px) rotate(45deg);
    }
  }
  @keyframes burgerTopReverse {
    0% {
      transform: translateY(8px) rotate(-45deg);
    }
    50% {
      transform: translateY(8px) rotate(0);
    }
    100% {
      transform: translateY(0) rotate(0);
    }
  }
  @keyframes burgerBottomReverse {
    0% {
      transform: translateY(-8px) rotate(45deg);
    }
    50% {
      transform: translateY(-8px) rotate(0);
    }
    100% {
      transform: translateY(0) rotate(0);
    }
  }
}