@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
  }

  .extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
  }

  .light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
  }

  .regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  .medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
  }

  .semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
  }

  .bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
  }

  .extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
  }

  .black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
  }

  .thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
  }

  .extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
  }

  .light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
  }

  .regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
  }

  .medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
  }

  .semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
  }

  .bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
  }

  .extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
  }

  .black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
  }

/* Typography System - Title Series (Semibold, increasing sizes) */
.typo-title-1 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.875rem; /* 14px */
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.typo-title-2 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1rem; /* 16px */
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.typo-title-3 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.25rem; /* 20px */
  line-height: 1.375;
  letter-spacing: -0.01em;
}

.typo-title-4 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.5rem; /* 24px */
  line-height: 1.375;
  letter-spacing: -0.02em;
}

.typo-title-5 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 2rem; /* 32px */
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.typo-title-6 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 2.5rem; /* 40px */
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Typography System - Text Series (Regular, increasing sizes) */
.typo-text-1 {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 0.75rem; /* 12px */
  line-height: 1.5;
}

.typo-text-2 {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
}

.typo-text-3 {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1.5;
}

.typo-text-4 {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
}

.typo-text-5 {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 1.25rem; /* 20px */
  line-height: 1.5;
}

.typo-text-6 {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 1.5rem; /* 24px */
  line-height: 1.5;
}

/* Additional Typography Variants */
/* Headers */
.typo-header-1 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 3rem; /* 48px */
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.typo-header-2 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 2.25rem; /* 36px */
  line-height: 1.2;
  letter-spacing: -0.03em;
}

/* Caption Text */
.typo-caption {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 0.75rem; /* 12px */
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.typo-caption-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.75rem; /* 12px */
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* Labels */
.typo-label {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* Button Text */
.typo-button-small {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.75rem; /* 12px */
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.typo-button-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.875rem; /* 14px */
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.typo-button-large {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1rem; /* 16px */
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* UI Elements */
.typo-ui-overline {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.6875rem; /* 11px */
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.typo-ui-badge {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.625rem; /* 10px */
  line-height: 1;
  letter-spacing: 0.04em;
}

/* Link Styles */
.typo-link {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  text-decoration: underline;
}

/* Quote Styles */
.typo-quote {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* Responsive Typography Helpers */
.typo-responsive-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 5vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.typo-responsive-text {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(0.875rem, 3vw, 1.125rem);
  line-height: 1.5;
}