:root {
  /* brand colors */
  --color-primary: #058443;
  --color-secondary: #8de8a4;
  --color-text-primary: #1b2e23;
  --color-text-secondary: #2d2f2e;
  --radius-button-primary: 0px;

  /* utils */
  --offer-card-speed-background: black;

  /* buttons */
  --color-button-main: #058443;
  --color-button-main-hover: #0d6e41;
  --color-button-outline: white;
  --color-button-outline-hover: #0d6e41;

  --color-button-confirm: linear-gradient(180deg, #35ce5c 0%, #8de8a4 14.5%, #35ce5c 41.15%);
  --color-button-cancel: linear-gradient(
    180deg,
    #e51d22 0%,
    #ff5a5e 14.5%,
    #e51d22 69.5%,
    #c11418 100%
  );
  --radius-button: 300px;
  --color-border-button-main: #000;
  --width-border-button-main: 2px;

  /* progress bar */
  --color-progress-bar-outside-border: #58a968;
  --color-progress-bar-outside-background: #d5f0da;
  --color-progress-bar-inside-border: #d5f0da;
  --color-progress-bar-inside-background: #058443;
  --heigth-progress-bar-outside: 20px;

  /* fonts */
  --title-1-font-size: 1.125rem;
  --title-1-line-height: 1.75rem;
  --title-2-font-size: 1rem;
  --title-2-line-height: 1.5rem;
  --title-3-font-size: 1.14285714rem;
  --title-3-line-height: 1.25rem;
  --heading-3-font-size: 1.875rem;
  --heading-3-line-height: 2.25rem;
  --heading-4-font-size: 1.5rem;
  --heading-4-line-height: 2rem;
  --body-2-font-size: 1rem;
  --body-2-line-height: 1.5rem;
  --body-3-font-size: 0.875rem;
  --body-3-line-height: 1.25rem;
  --body-4-font-size: 0.75rem;
  --body-4-line-height: 1rem;
  --body-5-font-size: 0.625rem;
  --body-5-line-height: 0.75rem;

  --font-bold: bold;
  --font-medium: medium;
  --font-regular: regular;
  --font-thin: light;

  --font-family-primary: 'Figtree', sans-serif;
  --font-family-secondary: 'Outfit', sans-serif;

  /* inputs */
  --input-border: #71717b;
  --input-border-disabled: #d4d4d8;
  --input-border-focused: #058443;
  --input-border-error: #eb1614;
  --input-text: #000000;
  --input-text-placeholder: #71717b;
  --input-text-placeholder-disabled: #d4d4d8;
  --input-text-placeholder-error: #eb1614;
  --input-border-width: 2px;
  --input-radius: 12px;

  /* body background image */
  --background-image: url('../easyconnect-background-pattern.png');
  --background-color: #08c269;
}

@media screen and (min-width: 765px) {
  :root {
    --heading-3-font-size: 2.25rem;
    --heading-3-line-height: 2.5rem;
    --heading-4-font-size: 1.875rem;
    --heading-4-line-height: 2.25rem;
    --body-2-font-size: 1.125rem;
    --body-2-line-height: 1.75rem;
    --body-3-font-size: 1rem;
    --body-3-line-height: 1.5rem;
    --body-4-font-size: 0.875rem;
    --body-4-line-height: 1.25rem;
    --body-5-font-size: 0.75rem;
    --body-5-line-height: 1rem;
    --title-1-font-size: 1.25rem;
    --title-1-line-height: 1.75rem;
    --title-2-font-size: 1.125rem;
    --title-2-line-height: 1.75rem;
    --title-3-font-size: 1.125rem;
    --title-3-line-height: 1.75rem;
  }
}