@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

* {
  font-family: "Montserrat", sans-serif;
}

:root {
  /* ---------------- FONT SIZE (SMALLEST → LARGEST) ---------------- */
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 15px;
  --fs-xl: 16px;
  --fs-2xl: 18px;
  --fs-3xl: 20px;
  --fs-4xl: 24px;
  --fs-5xl: 28px;
  --fs-6xl: 29.34px;
  --fs-7xl: 30px;
  --fs-8xl: 34px;
  --fs-9xl: 36px;
  --fs-10xl: 42px;
  --fs-11xl: 45px;
  --fs-12xl: 68px;
  --fs-13xl: 78px;
  --fs-14xl: 100px;
  --fs-15xl: 120px;

  /* ---------------- COLORS ---------------- */
  --black: #000000;
  --light-black: #131313;
  --deep-blue: #00171f;
  --deep-gray: #c0c0c0;
  --light-gray: #c4c2c2;
  --white: #ffffff;
  --red: #f24a4a;

  /* ---------------- LINE HEIGHT (SMALLEST → LARGEST) ---------------- */
  --leading-60: 60%;
  --leading-70: 70%;
  --leading-80: 80%;
  --leading-90: 90%;
  --leading-100: 100%;
  --leading-106: 106%;
  --leading-110: 110%;
  --leading-120: 120%;
  --leading-130: 130%;
  --leading-133: 133%;
  --leading-140: 140%;
  --leading-145: 145%;
  --leading-150: 150%;
  --leading-160: 160%;
  --leading-167: 167%;
  --leading-170: 170%;
  --leading-175: 175%;
  --leading-180: 180%;
  --leading-190: 190%;
  --leading-200: 200%;

  /* --font-weight-- */
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
}

/* -----------font-weight-----/ */
.fw-400 {
  font-weight: var(--fw-400);
}

.fw-500 {
  font-weight: var(--fw-500);
}

.fw-600 {
  font-weight: var(--fw-600);
}

.fw-700 {
  font-weight: var(--fw-700);
}

.fw-800 {
  font-weight: var(--fw-800);
}

/* ---------------- COLOR UTILITIES ---------------- */
.clr-black {
  color: var(--black);
}

.clr-light-black {
  color: var(--light-black);
}

.clr-deep-blue {
  color: var(--deep-blue);
}

.clr-deep-gray {
  color: var(--deep-gray);
}

.clr-light-gray {
  color: var(--light-gray);
}

.clr-white {
  color: var(--white);
}

.clr-red {
  color: var(--red);
}

.bg-black {
  background-color: var(--black);
}

.bg-light-black {
  background-color: var(--light-black);
}

.bg-red {
  background-color: var(--red);
}

/* ---------------- FONT SIZE UTILITIES ---------------- */
.fs-sm {
  font-size: var(--fs-sm);
}

.fs-md {
  font-size: var(--fs-md);
}

.fs-lg {
  font-size: var(--fs-lg);
}

.fs-xl {
  font-size: var(--fs-xl);
}

.fs-2xl {
  font-size: var(--fs-2xl);
}

.fs-3xl {
  font-size: var(--fs-3xl);
}

.fs-4xl {
  font-size: var(--fs-4xl);
}

.fs-5xl {
  font-size: var(--fs-5xl);
}

.fs-6xl {
  font-size: var(--fs-6xl);
}

.fs-7xl {
  font-size: var(--fs-7xl);
}

.fs-8xl {
  font-size: var(--fs-8xl);
}

.fs-9xl {
  font-size: var(--fs-9xl);
}

.fs-10xl {
  font-size: var(--fs-10xl);
}

.fs-11xl {
  font-size: var(--fs-11xl);
}

.fs-12xl {
  font-size: var(--fs-12xl);
}

.fs-13xl {
  font-size: var(--fs-13xl);
}

.fs-14xl {
  font-size: var(--fs-14xl);
}

.fs-15xl {
  font-size: var(--fs-15xl);
}

.--fs-16xl {
  font-size: var(--fs-16xl);
}

/* ---------------- LINE HEIGHT UTILITIES ---------------- */
.leading-60 {
  line-height: var(--leading-60);
}

.leading-70 {
  line-height: var(--leading-70);
}

.leading-80 {
  line-height: var(--leading-80);
}

.leading-90 {
  line-height: var(--leading-90);
}

.leading-100 {
  line-height: var(--leading-100);
}

.leading-106 {
  line-height: var(--leading-106);
}

.leading-110 {
  line-height: var(--leading-110);
}

.leading-120 {
  line-height: var(--leading-120);
}

.leading-130 {
  line-height: var(--leading-130);
}

.leading-140 {
  line-height: var(--leading-140);
}

.leading-145 {
  line-height: var(--leading-145);
}

.leading-150 {
  line-height: var(--leading-150);
}

.leading-160 {
  line-height: var(--leading-160);
}

.leading-170 {
  line-height: var(--leading-170);
}
.leading-180 {
  line-height: var(--leading-180);
}

.leading-190 {
  line-height: var(--leading-190);
}

.leading-200 {
  line-height: var(--leading-200);
}

@media (max-width: 1023.99px) {
  :root {
    /* ---------------- FONT SIZE (SMALLEST → LARGEST) ---------------- */
    --fs-sm: 9px;
    --fs-md: 11px;
    --fs-lg: 12px;
    --fs-xl: 13px;
    --fs-2xl: 14px;
    --fs-3xl: 16px;
    --fs-4xl: 18px;
    --fs-5xl: 20px;
    --fs-6xl: 22px;
    --fs-7xl: 24px;
    --fs-8xl: 26px;
    --fs-9xl: 24px;
    --fs-10xl: 28px;
    --fs-11xl: 36px;
    --fs-12xl: 45px;
    --fs-13xl: 50px;
    --fs-14xl: 65px;
    --fs-15xl: 80px;
    --fs-16xl: 100px;
  }
}

@media (max-width: 767.99px) {
  :root {
    --fs-8xl: 24px;
    --fs-10xl: 20px;
    --fs-11xl: 24px;
    --fs-12xl: 40px;
    --fs-13xl: 45px;
    --fs-14xl: 58px;
    --fs-15xl: 60px;
  }
}

@media (max-width: 575.99px) {
  :root {
    --fs-3xl: 14px;
    --fs-4xl: 16px;
    --fs-5xl: 18px;
    --fs-6xl: 20px;
    --fs-7xl: 22px;
    --fs-8xl: 18px;
    --fs-9xl: 20px;
    --fs-10xl: 20px;
    --fs-11xl: 32px;
    --fs-12xl: 34px;
    --fs-13xl: 36px;
    --fs-14xl: 38px;
    --fs-15xl: 48px;
  }
}

@media (max-width: 375.99px) {
  :root {
    --fs-5xl: 16px;
    --fs-12xl: 28px;
    --fs-13xl: 30px;
    --fs-14xl: 32px;
    --fs-15xl: 40px;
  }
}