/* ========================================
   FLUID TYPOGRAPHY UTILITIES
   Based on Design System: 390px → 764px → 1728px
   ======================================== */

/* ========================
   HEADING CLASSES
   ======================== */

/* H1: 32px → 36px → 56px / 120% */
h1,
.h1,
.title-h1 {
  font-size: clamp(2rem, 1.4286rem + 2.4242vw, 3.5rem);
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
}

/* H2: 26px → 32px → 48px / 120-125% */
h2,
.h2,
.title-h2 {
  font-size: clamp(1.625rem, 1.1964rem + 1.8182vw, 3rem);
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
}

/* Note: .title-3xl is defined in typography.css with more complete styling */

/* H3: 24px → 28px → 38px / 120% */
h3,
.h3,
.title-h3 {
  font-size: clamp(1.5rem, 1.2143rem + 1.2121vw, 2.375rem);
  line-height: 1.2;
  font-weight: var(--font-weight-semibold);
}

/* Note: .title-2xl is defined in typography.css with more complete styling */

/* H4: 22px → 24px → 32px / 120-125% */
h4,
.h4,
.title-h4 {
  font-size: clamp(1.375rem, 1.1607rem + 0.9091vw, 2rem);
  line-height: 1.2;
  font-weight: var(--font-weight-semibold);
}

/* Note: .title-xl is defined in typography.css with more complete styling */

/* H5: 18px → 24px → 26px / 120% */
h5,
.h5,
.title-h5,
.title-lg {
  font-size: clamp(1.125rem, 0.9821rem + 0.6061vw, 1.625rem);
  line-height: 1.2;
  font-weight: var(--font-weight-medium);
}

/* ========================
   PARAGRAPH CLASSES
   ======================== */

/* Paragraph Large: 18px/150% (constant size) */
.text-large,
.p-large {
  font-size: 1.125rem; /* 18px */
  line-height: 1.5; /* 150% */
}

/* Note: .p-medium and .text-preheader are defined in typography.css 
   with more complete styling including font-family and margins */

/* Paragraph Medium: 16px/120% or 150% (constant size) */
.text-description {
  font-size: 1rem; /* 16px */
  line-height: 1.5; /* 150% default */
}

.text-medium-120,
.p-medium-120 {
  font-size: 1rem; /* 16px */
  line-height: 1.2; /* 120% */
}

/* Paragraph Small: 12px/150% (constant size) */
.text-small,
.p-small {
  font-size: 0.75rem; /* 12px */
  line-height: 1.5; /* 150% */
}

/* ========================
   PREHEADER/LABEL CLASSES
   ======================== */

/* Note: .text-preheader is defined in typography.css with complete styling */

/* Preheader Small: 14px/125% (constant size) */
.preheader-small {
  font-size: 0.875rem; /* 14px */
  line-height: 1.25; /* 125% */
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ========================
   FOOTER TEXT
   ======================== */

.footer-text,
.text-footer {
  font-size: 0.75rem; /* 12px */
  line-height: 2; /* 200% */
}

/* ========================
   FONT SIZE UTILITIES (Responsive)
   ======================== */

/* Fixed font sizes matching class names */
.fs-12 {
  font-size: 0.75rem; /* 12px */
}
.fs-14 {
  font-size: 0.875rem; /* 14px */
}
.fs-16 {
  font-size: 1rem; /* 16px */
}
.fs-18 {
  font-size: 1.125rem; /* 18px */
}
.fs-20 {
  font-size: 1.25rem; /* 20px */
}
.fs-24 {
  font-size: 1.5rem; /* 24px */
}
.fs-26 {
  font-size: 1.625rem; /* 26px */
}
.fs-28 {
  font-size: 1.75rem; /* 28px */
}
.fs-32 {
  font-size: 2rem; /* 32px */
}
.fs-36 {
  font-size: 2.25rem; /* 36px */
}
.fs-38 {
  font-size: 2.375rem; /* 38px */
}
.fs-48 {
  font-size: 3rem; /* 48px */
}
.fs-56 {
  font-size: 3.5rem; /* 56px */
}

/* Responsive font size utilities with breakpoint notation */
.fs-lg-24 {
  font-size: 1rem;
}

@media (min-width: 992px) {
  .fs-lg-24 {
    font-size: 1.5rem;
  }
}

/* ========================
   LINE HEIGHT UTILITIES
   ======================== */

.lh-100 {
  line-height: 1;
}
.lh-110 {
  line-height: 1.1;
}
.lh-120 {
  line-height: 1.2;
}
.lh-125 {
  line-height: 1.25;
}
.lh-150 {
  line-height: 1.5;
}
.lh-200 {
  line-height: 2;
}

/* ========================
   FONT WEIGHT UTILITIES
   ======================== */

.fw-light {
  font-weight: var(--font-weight-light);
}
.fw-normal,
.fw-regular {
  font-weight: var(--font-weight-regular);
}
.fw-medium {
  font-weight: var(--font-weight-medium);
}
.fw-semibold {
  font-weight: var(--font-weight-semibold);
}
.fw-bold {
  font-weight: var(--font-weight-bold);
}

/* ========================
   TEXT TRANSFORM UTILITIES
   ======================== */

/* Note: .text-uppercase, .text-lowercase, .text-capitalize are defined 
   in typography.css to avoid duplication */

.text-normal-case {
  text-transform: none;
}

/* ========================
   LETTER SPACING UTILITIES
   ======================== */

.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-normal {
  letter-spacing: 0;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}