/* Base Typography System using Airbnb Cereal */

/* Set base font family for entire application */
:root {
    --font-family-base: "Lato", "Airbnb Cereal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Base font settings */
html, body {
    font-family: var(--font-family-base);
    font-weight: 400;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Font Weight Classes - Base styles */
.text-thin { 
    font-family: var(--font-family-base);
    font-weight: 100;
    font-style: normal;
}

.text-extralight { 
    font-family: var(--font-family-base);
    font-weight: 200;
    font-style: normal;
}

.text-light { 
    font-family: var(--font-family-base);
    font-weight: 300;
    font-style: normal;
}

.text-regular { 
    font-family: var(--font-family-base);
  font-weight: 400;
    font-style: normal;
}

.text-medium { 
    font-family: var(--font-family-base);
    font-weight: 500;
    font-style: normal;
}

.text-semibold { 
    font-family: var(--font-family-base);
  font-weight: 600;
    font-style: normal;
}

.text-bold { 
    font-family: var(--font-family-base);
    font-weight: 700;
    font-style: normal;
}

.text-extrabold { 
    font-family: var(--font-family-base);
    font-weight: 800;
    font-style: normal;
}

.text-black { 
    font-family: var(--font-family-base);
    font-weight: 900;
    font-style: normal;
}

/* Font Style Classes */
.text-italic { font-style: italic; }

/* Typography Scale - Inheriting from base styles */
/* Headers */
h1, .h1 {
    @extend .text-semibold;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.5px;
}

h2, .h2 {
    @extend .text-medium;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.3px;
}

h3, .h3 {
    @extend .text-medium;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.1px;
}

/* Titles */
.title-text {
    @extend .text-semibold;
    font-size: 26px;
    line-height: 28px;
    letter-spacing: -0.5px;
}

/* Navigation Text */
.nav-text {
    @extend .text-medium;
  font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.1px;
}

.secondary-nav-text {
    @extend .text-regular;
    font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.1px;
}

/* Subheaders */
.subheader {
    @extend .text-medium;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.1px;
    color: #293141;
}

/* Body Text */
body, .body-text {
    @extend .text-regular;
  font-size: 14px;
  line-height: 20px;
}

.body-text-small {
    @extend .text-regular;
  font-size: 13px;
  line-height: 18px;
}

.body-text-x-small {
    @extend .text-regular;
  font-size: 12px;
  line-height: 18px;
}

/* Call to Action */
.cta-primary {
    @extend .text-medium;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.1px;
}

.cta-secondary {
    @extend .text-regular;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.1px;
}

/* Pricing */
.price-large {
    @extend .text-semibold;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.2px;
}

.price-regular {
    @extend .text-semibold;
  font-size: 16px;
  line-height: 24px;
}

/* Details and Metadata */
.details-text {
    @extend .text-regular;
  font-size: 13px;
  line-height: 18px;
  color: #697586;
}

/* Labels and Tags */
.label-text {
    @extend .text-medium;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}