:root {
  /* fonts */
  --font-jost: Jost;
  --font-inter: Inter;

  /* font sizes */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;

  /* Colors */
  --white: #fff;
  --gray-4: #bdbdbd;
  --color-cadetblue-100: #00a6c5;
  --background: rgba(0, 166, 197, 0.05);
  --tiles-bg: #fbfbfb;
  --gray-3: #828282;
  --black1: #000;
  --gray-5: #e0e0e0;
  --color-lavender: #f6ebff;
  --color-darkorchid: #bb64ff;
  --color-aliceblue: #edfaff;
  --fresh-blue: #36c5f5;
  --color-snow: #fff8f6;
  --color-salmon: #ff7a7a;
  --green-2: #27ae60;
  --gray-6: #f2f2f2;

  /* Gaps */
  --gap-5xs: 2px;
  --gap-4xs: 4px;
  --gap-3xs: 8px;
  --gap-2xs: 10px;
  --gap-xs: 12px;
  --gap-sm: 13.33px;
  --gap-md: 16px;
  --gap-lg: 20.24px;
  --gap-xl: 20px;
  --gap-2xl: 24px;
  --gap-3xl: 32px;
  --gap-4xl: 40px;

  /* Paddings */
  --padding-6xs: 4px;
  --padding-5xs: 6.666666507720947px;
  --padding-4xs: 7.111111164093018px;
  --padding-3xs: 8px;
  --padding-2xs: 10.666666984558105px;
  --padding-xs: 10px;
  --padding-sm: 12px;
  --padding-md: 13.333333015441895px;
  --padding-lg: 14.084297180175781px;
  --padding-xl: 16px;
  --padding-2xl: 21.126445770263672px;
  --padding-3xl: 24px;
  --padding-4xl: 40px;
  --padding-5xl: 130px;

  /* border radiuses */
  --br-3xs: 2px;
  --br-2xs: 3.33px;
  --br-xs: 4px;
  --br-sm: 8.4px;
  --br-md: 8px;
  --br-lg: 12px;
  --br-xl: 14.08px;
  --br-2xl: 16px;
  --br-3xl: 39.01px;
}