:root {
  --alabaster: #fafafa;
  --astronaut: #293e76;
  --azure: #3a58a7;
  --black: #000000;
  --chambray: #314a8d;
  --cultured-pearl: #f5f5f5;
  --gray-nurse: #e9e9eb;
  --iron: #d5d6d9;
  --mirage: #181d27;
  --outer-space: #414651;
  --pale-sky: #717680;
  --pigeon-post: #afbbdc;
  --sapphire: #36529b;
  --scarpa-flow: #535861;
  --ship-cove: #768bc2;
  --white: #ffffff;
  --wistful: #99a8d2;

  /* Desktop font sizes */
  --font-size-24px: 24px;
  --font-size-72px: 72px;
  --font-size-l: 20px;
  --font-size-m: 18px;
  --font-size-s: 16px;
  --font-size-xl: 30px;
  --font-size-xs: 14px;
  --font-size-xxl: 36px;
  --font-size-xxxl: 48px;

  --font-family-inter: "Inter", Helvetica;
  --font-family-montserrat: "montserrat", "almarai", "Arial", sans-serif;
  /* --font-family-montserrat: 'Montserrat', sans-serif; */

}

/* Mobile font sizes */
@media screen and (max-width: 768px) {
  :root {
    --font-size-24px: 20px;
    --font-size-72px: 42px;
    --font-size-l: 18px;
    --font-size-m: 16px;
    --font-size-s: 14px;
    --font-size-xl: 24px;
    --font-size-xs: 12px;
    --font-size-xxl: 28px;
    --font-size-xxxl: 32px;
  }
}

/* Small mobile font sizes */
@media screen and (max-width: 480px) {
  :root {
    --font-size-24px: 18px;
    --font-size-72px: 36px;
    --font-size-l: 16px;
    --font-size-m: 14px;
    --font-size-s: 13px;
    --font-size-xl: 20px;
    --font-size-xs: 11px;
    --font-size-xxl: 24px;
    --font-size-xxxl: 28px;
  }
}

.text-mdsemibold {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.text-smsemibold {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.display-lgsemibold {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.96px;
}

.text-xlregular {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.display-mdsemibold {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.72px;
}

.display-smsemibold {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.text-lgregular {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.text-mdregular {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.display-xssemibold {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-24px);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.text-mdmedium {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.text-lgmedium {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.text-smmedium {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.text-smregular {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.text-xlsemibold {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.text-xlmedium {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.display-2xlsemibold {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-72px);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -1.44px;
}

.text-lgsemibold {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.display-lgmedium {
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.96px;
}

.inter-bold-scarpa-flow-16px {
  color: var(--scarpa-flow);
  font-family: var(--font-family-montserrat);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 700;
}