/* 1. Import Inter Font (Optional) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url("_variables.1a9eb6a3b455.css");

/* 3. Base Styles */
html {
  font-family: var(--font-family-base);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  color: #000;
  background-color: #fff;
}

/* =======================================
   4. Display Classes
   ======================================= */
.display-2xl {
  font-size: var(--font-size-display-2xl);
  line-height: var(--line-height-display-2xl);
  letter-spacing: var(--letter-spacing-display-2xl);
}

.display-xl {
  font-size: var(--font-size-display-xl);
  line-height: var(--line-height-display-xl);
  letter-spacing: var(--letter-spacing-display-xl);
}

.display-lg {
  font-size: var(--font-size-display-lg);
  line-height: var(--line-height-display-lg);
  letter-spacing: var(--letter-spacing-display-lg);
}

.display-md {
  font-size: var(--font-size-display-md);
  line-height: var(--line-height-display-md);
  letter-spacing: var(--letter-spacing-display-md);
}

.display-sm {
  font-size: var(--font-size-display-sm);
  line-height: var(--line-height-display-sm);
}

.display-xs {
  font-size: var(--font-size-display-xs);
  line-height: var(--line-height-display-xs);
}

.display-xxs {
  font-size: var(--font-size-display-xxs);
  line-height: var(--line-height-display-xxs);
}
/* =======================================
   5. Text Classes
   ======================================= */
.text-xl {
  font-size: var(--font-size-text-xl);
  line-height: var(--line-height-text-xl);
}

.text-lg {
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
}

.text-md {
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
}

.text-sm {
  font-size: var(--font-size-text-sm);
  line-height: var(--line-height-text-sm);
}

.text-xs {
  font-size: var(--font-size-text-xs);
  line-height: var(--line-height-text-xs);
}

.text-xss {
  font-size: var(--font-size-text-xss);
  line-height: var(--line-height-text-xss);
}

/* =======================================
   6. Font Weight Utilities
   ======================================= */
.font-light {
  font-weight: 300;
}
.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}


.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/* =======================================
   7. Alignment Utilities
   ======================================= */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

@media (max-width: 768px) {
  /* Define new mobile-specific typography variables */
  :root {
    --font-size-mobile-display-2xl: var(--font-size-display-lg);
    --line-height-mobile-display-2xl: var(--line-height-display-lg);
    --font-size-mobile-display-xl: var(--font-size-display-md);
    --line-height-mobile-display-xl: var(--line-height-display-md);
    --font-size-mobile-display-lg: var(--font-size-display-sm);
    --line-height-mobile-display-lg: var(--line-height-display-sm);
    --font-size-mobile-display-md: var(--font-size-display-xs);
    --line-height-mobile-display-md: var(--line-height-display-xs);
    --font-size-mobile-display-sm: var(--font-size-display-xxs);
    --line-height-mobile-display-sm: var(--line-height-display-xxs);
    --font-size-mobile-display-xs: var(--font-size-text-xl);
    --line-height-mobile-display-xs: var(--line-height-text-xl);
    --font-size-mobile-display-xxs: var(--font-size-text-lg);
    --line-height-mobile-display-xxs: var(--line-height-text-lg);
    --font-size-mobile-text-xl: var(--font-size-text-lg);
    --line-height-mobile-text-xl: var(--line-height-text-lg);
    --font-size-mobile-text-lg: var(--font-size-text-md);
    --line-height-mobile-text-lg: var(--line-height-text-md);
    --font-size-mobile-text-md: var(--font-size-text-sm);
    --line-height-mobile-text-md: var(--line-height-text-sm);
    --font-size-mobile-text-sm: var(--font-size-text-xs);
    --line-height-mobile-text-sm: var(--line-height-text-xs);
    --font-size-mobile-text-xs: var(--font-size-text-xss);
    --line-height-mobile-text-xs: var(--line-height-text-xss);
    --font-size-mobile-text-xxs: var(--font-size-text-xxs);
    --line-height-mobile-text-xxs: var(--line-height-text-xxs);
    
  }

  .display-2xl {
    font-size: var(--font-size-mobile-display-2xl);
    line-height: var(--line-height-mobile-display-2xl);
  }
  .display-xl {
    font-size: var(--font-size-mobile-display-xl);
    line-height: var(--line-height-mobile-display-xl);
  }
  .display-lg {
    font-size: var(--font-size-mobile-display-lg);
    line-height: var(--line-height-mobile-display-lg);
  }
  .display-md {
    font-size: var(--font-size-mobile-display-md);
    line-height: var(--line-height-mobile-display-md);
  }
  .display-sm {
    font-size: var(--font-size-mobile-display-sm);
    line-height: var(--line-height-mobile-display-sm);
  }
  .display-xs {
    font-size: var(--font-size-mobile-display-xs);
    line-height: var(--line-height-mobile-display-xs);
  }
  .display-xxs {
    font-size: var(--font-size-mobile-display-xxs);
    line-height: var(--line-height-mobile-display-xxs);
  }
  .text-xl {
    font-size: var(--font-size-mobile-text-xl);
    line-height: var(--line-height-mobile-text-xl);
  }
  .text-lg {
    font-size: var(--font-size-mobile-text-lg);
    line-height: var(--line-height-mobile-text-lg);
  }
  .text-md {
    font-size: var(--font-size-mobile-text-md);
    line-height: var(--line-height-mobile-text-md);
  }
  .text-sm {
    font-size: var(--font-size-mobile-text-sm);
    line-height: var(--line-height-mobile-text-sm);
  }
  .text-xs {
    font-size: var(--font-size-mobile-text-xs);
    line-height: var(--line-height-mobile-text-xs);
  }
  .text-xxs {
    font-size: var(--font-size-mobile-text-xxs);
    line-height: var(--line-height-mobile-text-xxs);
  }
  
}

/* =======================================
   8. Typography Utilities
   =======================================   */
.text-secondary {
  color: var(--Gray-600, #535862);
  font-size: var(--Font-size-Text-sm, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}