:root {
  /* brand colors */
  --color-primary: #0022F0;
  --color-secondary: rgb(219, 255, 89);
  --color-text-primary: #ffffff;
  --color-text-secondary: #2a2a2d;
  --radius-button-primary: 128px;

  /* utils */
  --offer-card-speed-background: linear-gradient(
    180deg,
    #0022f0 0%,
    #6366f1 4.69%,
    #0022f0 24.48%,
    #0625cd 100%
  );

  /* buttons */
  --color-button-main: linear-gradient(
    180deg,
    #0022f0 0%,
    #6366f1 4.69%,
    #0022f0 24.48%,
    #0625cd 100%
  );
  --color-button-main-hover: linear-gradient(
    180deg,
    #102a9f 0%,
    #6366f1 4.69%,
    #102a9f 24.48%,
    #0a175c 100%
  );
  --color-button-outline: white;
  --color-button-outline-hover: linear-gradient(
    180deg,
    #102a9f 0%,
    #6366f1 4.69%,
    #102a9f 24.48%,
    #0a175c 100%
  );

  --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: #568eff;
  --color-progress-bar-outside-background: #d5eaff;
  --color-progress-bar-inside-border: #d5eaff;
  --color-progress-bar-inside-background: #2721f0;
  --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: 'Fieldwork', monospace;
  --font-family-secondary: 'Sofia Pro', sans-serif;

  /* inputs */
  --input-border: #71717b;
  --input-border-disabled: #d4d4d8;
  --input-border-focused: #3c82f6;
  --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('../freeconnect-background.png');
  --background-size: 1664.4px 1014.8px;
}

@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;
  }
}