@font-face {
  font-family: "Proxima Nova";
  src:
    url("../assets/fonts/proxima-nova/proxima-nova-light.woff2") format("woff2"),
    url("../assets/fonts/proxima-nova/proxima-nova-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Proxima Nova";
  src:
    url("../assets/fonts/proxima-nova/proxima-nova-regular.woff2") format("woff2"),
    url("../assets/fonts/proxima-nova/proxima-nova-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Proxima Nova";
  src:
    url("../assets/fonts/proxima-nova/proxima-nova-medium.woff2") format("woff2"),
    url("../assets/fonts/proxima-nova/proxima-nova-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Proxima Nova";
  src:
    url("../assets/fonts/proxima-nova/proxima-nova-semibold.woff2") format("woff2"),
    url("../assets/fonts/proxima-nova/proxima-nova-semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Proxima Nova";
  src:
    url("../assets/fonts/proxima-nova/proxima-nova-bold.woff2") format("woff2"),
    url("../assets/fonts/proxima-nova/proxima-nova-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  --color-page-bg: #FCFCFC;
  --color-white: #FFFFFF;
  --color-text-primary: #080914;
  --color-text-active: #1A1A1A;
  --color-text-muted: #A0A0A0;
  --color-surface-disabled: #EDEDED;
  --color-disabled-border-soft: rgba(237, 237, 237, 0.25);
  --color-progress-track: #D9D9D9;
  --color-primary: #00AAEF;
  --color-primary-border-soft: rgba(0, 170, 239, 0.25);
  --color-primary-shadow-soft: rgba(0, 170, 239, 0.1);
  --color-primary-shadow-strong: rgba(0, 170, 239, 0.25);
  --color-brand-purple: #4C55C0;
  --color-selected: #5C66C6;
  --color-success: #2FBF71;
  --color-warning: #F28C38;
  --color-purple-shadow: rgba(76, 85, 192, 0.2);
  --color-purple-shadow-strong: rgba(76, 85, 192, 0.25);
  --color-cancel: #AE157C;
  --color-cancel-shadow: rgba(174, 21, 124, 0.12);
  --color-input-shadow: rgba(237, 237, 237, 0.1);

  --font-body: "Proxima Nova", Arial, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-weight-figma-normal: 300;
  --font-weight-figma-semibold: 500;
  --font-weight-figma-bold: 600;
  --font-weight-ui-inactive: 400;
  --font-weight-ui-active: 600;
  --font-weight-ui-hover: 600;
  --font-weight-ui-clicked: 600;
  --font-weight-option-default: 400;
  --font-weight-option-selected: 500;

  --breakpoint-mobile-small: 320px;
  --breakpoint-mobile-standard: 375px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 768px;
  --breakpoint-large-desktop: 1920px;

  --layout-padding-mobile-small: 20px;
  --layout-padding-mobile-standard: 25px;
  --layout-padding-tablet: 30px;

  --interaction-max-width: 450px;
  --interaction-max-width-tablet: 500px;

  --stage-onboarding: #00AAEF;
  --stage-1: #2A6BEC;
  --stage-2: #7A5AF8;
  --stage-3: #E94B8A;
  --stage-4: #F28C38;
  --stage-5: #2FBF71;

  --option-height-mobile-small: 30px;
  --option-height-mobile-standard: 40px;
  --option-height-tablet: 50px;
  --option-radius: 25px;
  --option-font-size-mobile-small: 14px;
  --option-line-height-mobile-small: 17px;
  --option-font-size-mobile-standard: 16px;
  --option-line-height-mobile-standard: 19px;
  --option-font-size-tablet: 18px;
  --option-line-height-tablet: 22px;
  --option-icon-size-mobile-small: 16px;
  --option-icon-size-mobile-standard: 18px;
  --option-icon-size-tablet: 20px;
  --rating-size-mobile-small: 22px;
  --rating-size-mobile-standard: 27px;
  --rating-size-tablet: 34px;
  --rating-gap-mobile-small: 2px;
  --rating-gap-mobile-standard: 2px;
  --rating-gap-tablet: 12px;

  --system-button-height-mobile-small: 30px;
  --system-button-height-mobile-standard: 40px;
  --system-button-height-tablet: 46px;
  --system-button-radius: 25px;

  --input-height-mobile-small: 40px;
  --input-height-mobile-standard: 50px;
  --input-height-tablet: 60px;
  --input-padding-mobile-small: 10px 12px;
  --input-padding-mobile-standard: 10px 15px;
  --input-padding-tablet: 12px 20px;
  --input-radius-mobile-small: 8px;
  --input-radius-mobile-standard: 10px;
  --input-radius-tablet: 12px;

  --title-normal-font-size-mobile-small: 16px;
  --title-big-font-size-mobile-small: 18px;
  --title-normal-font-size-mobile-standard: 20px;
  --title-big-font-size-mobile-standard: 22px;
  --title-normal-font-size-tablet: 22px;
  --title-big-font-size-tablet: 24px;
  --title-line-height: 1.15;
  --title-big-line-height-mobile-small: 1.2;
  --title-big-line-height-mobile-standard: 1.2;

  --title-check-gap: 5px;
  --title-check-size-mobile-small: 18px;
  --title-check-size-mobile-standard: 20px;
  --title-check-size-tablet: 22px;

  --progress-bar-height: 3px;

  --text-font-size-mobile-small: 14px;
  --text-line-height: 1.2;
  --text-font-size-mobile-standard: 16px;
  --text-font-size-tablet: 18px;
  --trust-text-font-size-mobile-small: 16px;

  --logo-header-height-mobile-small: 60px;
  --logo-primary-width-mobile-small: 138px;
  --logo-primary-height-mobile-small: 26px;
  --logo-header-height-mobile-standard: 68px;
  --logo-primary-width-mobile-standard: 161px;
  --logo-primary-height-mobile-standard: 30px;
  --logo-header-height-tablet: 72px;
  --logo-primary-width-tablet: 171px;
  --logo-primary-height-tablet: 32px;
  --mark-header-height-mobile-small: 42px;
  --logo-mark-width-mobile-small: 37px;
  --logo-mark-height-mobile-small: 26px;
  --mark-header-height-mobile-standard: 50px;
  --logo-mark-width-mobile-standard: 43px;
  --logo-mark-height-mobile-standard: 30px;
  --mark-header-height-tablet: 54px;
  --logo-mark-width-tablet: 46px;
  --logo-mark-height-tablet: 32px;
  --header-progress-height-mobile: 3px;
  --header-progress-height-tablet: 4px;
  --module-header-label-font-size-mobile-small: 14px;
  --module-header-label-font-size-mobile-standard: 16px;
  --module-header-label-font-size-tablet: 18px;

  --landing-header-gap-mobile-small: 8px;
  --landing-title-padding-top-mobile-small: 20px;
  --landing-content-gap-mobile-small: 50px;
  --landing-benefit-gap-mobile-small: 6px;
  --landing-benefit-icon-size-mobile-small: 18px;
  --landing-benefit-font-size-mobile-small: 18px;
  --landing-benefit-line-height-mobile-small: 22px;
}