@font-face{
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Rubik-Regular.woff2') format('woff2'),
        url('/fonts/Rubik-Regular.woff') format('woff');
}
@font-face{
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Rubik-Medium.woff2') format('woff2'),
        url('/fonts/Rubik-Medium.woff') format('woff');
}
@font-face{
  font-family: 'SFPro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/SFProDisplay-Regular.woff2') format('woff2'),
        url('/fonts/SFProDisplay-Regular.woff') format('woff');
}
@font-face{
  font-family: 'SFPro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/SFProDisplay-Medium.woff2') format('woff2'),
        url('/fonts/SFProDisplay-Medium.woff') format('woff');
}

:root {
  --overlay: rgba(0, 0, 0, 0.1);
  --white: #fff;
  --black5: #f3f4f7;
  --black10: #F0F0F0;
  --black15: rgba(0, 0, 0, 0.15);
  --black25: rgba(0, 0, 0, 0.25);
  --black30: #DADDDE;
  --black60: #B9BABB;
  --black80: #8C8C8C;
  --black100: rgba(0, 0, 0, 1);
  --black: #333333;
  --brand: #00AEFF;
  --brand-deep: #0088EA;
  --brand-pale: #83D8FF;
  --brand-light: #EDF9FF;
  --accent-flat: #58E8FF;
  --accent-light: #EAFDFA;
  --purple: #FF4EC3;
  --red: #F34141;
  --red-light: #FFE8E8;
  --blue: #3985F9;
  --blue-deep: #0057FF;
  --blue-light: #EAF2FF;
  --sun: #FFE871;
  --sun-deep: #FFD057;
  --sun-light: #FFFADE;

  --paragraph-3xl-font: 400 28px/32px SFPro;
  --paragraph-2xl-font: 400 24px/28px SFPro;
  --paragraph-xl-font: 400 20px/24px SFPro;
  --paragraph-l-font: 400 16px/20px SFPro;
  --paragraph-m-font: 400 14px/18px SFPro;
  --paragraph-s-font: 400 12px/16px SFPro;
  --paragraph-xs-font: 400 10px/14px SFPro;
  --paragraph-3xs-font: 400 8px/10px SFPro;

  --h1-font: 500 24px/28px Rubik;
  --h2-font: 500 22px/26px Rubik;
  --h3-font: 500 20px/24px Rubik;
  --h4-font: 500 18px/22px Rubik;
  --h5-font: 500 16px/20px Rubik;

  --gap-xl: 32px;
  --gap-l: 16px;
  --gap-ms: 12px;
  --gap-m: 8px;
  --gap-s: 4px;

  --input-font: 400 16px/20px Rubik;
  --code-input-font: 400 22px/26px Rubik;
  --button-font: 500 16px/20px Rubik;

  --icon-size: 24px;
}