/**
 * Typography System
 *
 * Fluid typography using clamp() for responsive scaling
 * Base font-size: 62.5% (1rem = 10px)
 *
 * Breakpoints:
 * - Base (no suffix):     1279px - 1649px
 * - XL (-xl suffix):      1650px+ (designed for 2000px+)
 * - L (-l suffix):        1650px - 1999px (TODO)
 */

/* ============================================
   CSS VARIABLES - XL BREAKPOINT (1650px+)
   Designed for 2000px+ screens
   ============================================ */

:root {
  /* -------------------- HEADINGS -------------------- */

  /* H1: 5px → 90px */
  --fluid-h1-xl: clamp(0.5rem, -0.9286rem + 6.8796vw, 9rem);

  /* H2: 5px → 50px */
  --fluid-h2-xl: clamp(0.5rem, -0.8571rem + 2.5796vw, 5rem);

  /* H3: 20px → 35px */
  --fluid-h3-xl: clamp(2rem, 1.3363rem + 1.7699vw, 3.5rem);

  /* H4: 20px → 25px */
  --fluid-h4-xl: clamp(2rem, 0.8461rem + 0.3077vw, 2.5rem);

  /* -------------------- CUSTOM TEXT SIZES -------------------- */

  /* Feature Title: 25px → 45px */
  --fluid-feature-title-xl: clamp(2.5rem, 1.7534rem + 1.9912vw, 4.5rem);

  /* Section Title: 20px → 35px */
  --fluid-section-title-xl: clamp(2rem, 1.3363rem + 1.7699vw, 3.5rem);

  /* Subtitle: 20px → 30px */
  --fluid-subtitle-xl: clamp(2rem, 1.5575rem + 1.1799vw, 3rem);

  /* Highlighted Number: 50px → 130px */
  --fluid-highlighted-number-xl: clamp(5rem, 2.2449rem + 7.3469vw, 13rem);

  /* Highlighted H2: 5px → 70px */
  --fluid-highlighted-h2-xl: clamp(0.5rem, -0.5714rem + 5.1592vw, 7rem);

  /* -------------------- SPECIAL SIZES -------------------- */

  /* Site Title: ~10px → 135px */
  --fluid-site-title-xl: clamp(0.9643rem, -1.102rem + 9.9499vw, 13.5rem);

  /* Site Subtitle: ~2px → 27px */
  --fluid-site-subtitle-xl: clamp(0.1929rem, -0.2204rem + 1.99vw, 2.7rem);

  /* Highlighted Title: ~7px → 100px */
  --fluid-highlighted-title-xl: clamp(0.7143rem, -0.8163rem + 7.3703vw, 10rem);

  /* Highlighted Number: ~9px → 130px */
  --fluid-highlighted-number-xl: clamp(0.9286rem, -1.0612rem + 9.5796vw, 13rem);

  /* -------------------- BUTTONS -------------------- */

  /* Button Text: 5px → 21px */
  --fluid-button-text-size-xl: clamp(0.5rem, 0.0939rem + 1.9559vw, 2.1rem);

  /* Button Text Medium: ~4px → 18px */
  --fluid-button-text-size-medium-xl: clamp(
    0.4375rem,
    0.0261rem + 1.9796vw,
    1.8rem
  );
}

/* ============================================
   CSS VARIABLES - BASE BREAKPOINT (1279px-1649px)
   ============================================ */

:root {
  /* -------------------- HEADINGS -------------------- */

  /* H1: 40px → 65px */
  --fluid-h1: clamp(4rem, 3.0032rem + 2.6579vw, 6.5rem);

  /* H2: 25px → 35px */
  --fluid-h2: clamp(2.5rem, 1.3363rem + 1.7699vw, 3.5rem);

  /* H3: 18px → 22px */
  --fluid-h3: clamp(1.8rem, 1.6686rem + 0.3504vw, 2.2rem);

  /* H4: 16px → 20px */
  --fluid-h4: clamp(1.6rem, 1.2019rem + 1.0619vw, 2rem);

  /* -------------------- CUSTOM TEXT SIZES -------------------- */

  /* Feature Title: 20px → 30px */
  --fluid-feature-title: clamp(2rem, 1.5021rem + 1.3275vw, 3rem);

  /* Section Title: 16px → 25px */
  --fluid-section-title: clamp(1.6rem, 1.2019rem + 1.0619vw, 2.5rem);

  /* Subtitle: 16px → 23px */
  --fluid-subtitle: clamp(1.6rem, 1.246rem + 0.944vw, 2.3rem);

  /* Highlighted Number: 40px → 90px */
  --fluid-highlighted-number: clamp(4rem, 2.3389rem + 4.4292vw, 9rem);

  /* Highlighted H2: 30px → 50px */
  --fluid-highlighted-h2: clamp(3rem, 2.1705rem + 2.2124vw, 5rem);

  /* -------------------- SPECIAL SIZES -------------------- */

  /* Site Title: 45px → 75px */
  --fluid-site-title: clamp(4.5rem, 3.2563rem + 3.3186vw, 7.5rem);

  /* -------------------- BUTTONS -------------------- */

  /* Button Text: ~11px → 18px */
  --fluid-button-text-size: clamp(1.08rem, 0.7819rem + 0.796vw, 1.8rem);

  /* Button Text Medium: 9px → 15px */
  --fluid-button-text-size-medium: clamp(0.9rem, 0.6508rem + 0.664vw, 1.5rem);
}

/* ============================================
   UTILITY CLASSES - XL
   Direct assignment, no media queries
   ============================================ */

/* Headings */
.fluid-h1-xl {
  font-size: var(--fluid-h1-xl);
}
.fluid-h2-xl {
  font-size: var(--fluid-h2-xl);
}
.fluid-h3-xl {
  font-size: var(--fluid-h3-xl);
}
.fluid-h4-xl {
  font-size: var(--fluid-h4-xl);
}

/* Custom Text Sizes */
.feature-title-xl {
  font-size: var(--fluid-feature-title-xl);
}
.section-title-xl {
  font-size: var(--fluid-section-title-xl);
}
.subtitle-xl {
  font-size: var(--fluid-subtitle-xl);
}
.highlighted-number-xl {
  font-size: var(--fluid-highlighted-number-xl);
}
.highlighted-h2-xl {
  font-size: var(--fluid-highlighted-h2-xl);
}

/* Special Sizes */
.site-subtitle-xl {
  font-size: var(--fluid-site-subtitle-xl);
}
.highlighted-title-xl {
  font-size: var(--fluid-highlighted-title-xl);
}
.highlighted-number-xl {
  font-size: var(--fluid-highlighted-number-xl);
}

/* Buttons */
.button-text-size-xl {
  font-size: var(--fluid-button-text-size-xl);
}
.button-text-size-medium-xl {
  font-size: var(--fluid-button-text-size-medium-xl);
}

/* ============================================
   UTILITY CLASSES - BASE
   Direct assignment, no media queries
   ============================================ */

/* Headings */
.fluid-h1 {
  font-size: var(--fluid-h1);
}
.fluid-h2 {
  font-size: var(--fluid-h2);
}
.fluid-h3 {
  font-size: var(--fluid-h3);
}
.fluid-h4 {
  font-size: var(--fluid-h4);
}

/* Custom Text Sizes */
.feature-title {
  font-size: var(--fluid-feature-title);
}
.section-title {
  font-size: var(--fluid-section-title);
}
.subtitle {
  font-size: var(--fluid-subtitle);
  font-family: "Helvetica Neue";
}
.highlighted-number {
  font-size: var(--fluid-highlighted-number);
}
.highlighted-h2 {
  font-size: var(--fluid-highlighted-h2);
}

/* Buttons */
.button-text-size {
  font-size: var(--fluid-button-text-size);
}
.button-text-size-medium {
  font-size: var(--fluid-button-text-size-medium);
}

/* ============================================
   DEFAULT ELEMENT STYLES
   Automatic breakpoint switching with media queries
   ============================================ */
.site-title,
.site-title * {
  font-size: var(--fluid-site-title);
}

@media only screen and (min-width: 1650px) {
  .site-title,
  .site-title * {
    font-size: var(--fluid-site-title-xl);
  }
}

/* H1 - Base and XL with breakpoint */
h1,
h1 *,
.h1,
.h1 * {
  font-size: var(--fluid-h1);
}

@media only screen and (min-width: 1650px) {
  h1,
  h1 *,
  .h1,
  .h1 * {
    font-size: var(--fluid-h1-xl);
  }
}

/* H2 - Base and XL with breakpoint */
h2,
h2 *,
.h2,
.h2 * {
  font-size: var(--fluid-h2);
  letter-spacing: -0.15rem;
}

@media only screen and (min-width: 1650px) {
  h2,
  h2 *,
  .h2,
  .h2 * {
    font-size: var(--fluid-h2-xl);
  }
}

/* H3 - Base and XL with breakpoint */
h3,
h3 *,
.h3,
.h3 * {
  font-size: var(--fluid-h3);
  font-family: "Helvetica Neue";
}

@media only screen and (min-width: 1650px) {
  h3,
  h3 *,
  .h3,
  .h3 * {
    font-size: var(--fluid-h3-xl);
  }
}

/* H4 - Base and XL with breakpoint */
h4,
h4 *,
.h4,
.h4 * {
  font-size: var(--fluid-h4);
  /*font-family: "Helvetica Neue" !important;*/
  /*font-weight: 700 !important;*/
}

@media only screen and (min-width: 1650px) {
  h4,
  h4 *,
  .h4,
  .h4 * {
    font-size: var(--fluid-h4-xl);
  }
}

/* ============================================
   RESPONSIVE CLASSES
   Automatic breakpoint switching with media queries
   ============================================ */

/* Feature Title - Base and XL with breakpoint */
.feature-title,
.feature-title *,
blockquote {
  font-size: var(--fluid-feature-title);
  line-height: 110%;
}

@media only screen and (min-width: 1650px) {
  .feature-title,
  .feature-title *,
  blockquote {
    font-size: var(--fluid-feature-title-xl);
  }
}

/* Section Title - Base and XL with breakpoint */
.section-title,
.section-title * {
  font-size: var(--fluid-section-title);
  font-family: "Helvetica Neue";
}

@media only screen and (min-width: 1650px) {
  .section-title,
  .section-title * {
    font-size: var(--fluid-section-title-xl);
  }
}

/* Subtitle - Base and XL with breakpoint */
.subtitle,
.subtitle * {
  font-size: var(--fluid-subtitle);
  font-weight: 700;
  line-height: 100%;
}

@media only screen and (min-width: 1650px) {
  .subtitle,
  .subtitle * {
    font-size: var(--fluid-subtitle-xl);
  }
}

/* Highlighted Number - Base and XL with breakpoint */
.highlighted-number,
.highlighted-number * {
  font-size: var(--fluid-highlighted-number);
  line-height: 100%;
}

@media only screen and (min-width: 1650px) {
  .highlighted-number,
  .highlighted-number * {
    font-size: var(--fluid-highlighted-number-xl);
  }
}

/* Highlighted H2 - Base and XL with breakpoint */
.highlighted-h2,
.highlighted-h2 * {
  font-size: var(--fluid-highlighted-h2);
}

@media only screen and (min-width: 1650px) {
  .highlighted-h2,
  .highlighted-h2 * {
    font-size: var(--fluid-highlighted-h2-xl);
  }
}