:root{
  --f-xs: clamp(0.79rem, 0.08vi + 0.77rem, 0.87rem);
  --f-sm: clamp(0.89rem, 0.15vi + 0.86rem, 1.04rem);
  --f-base: clamp(1rem, 0.25vi + 0.95rem, 1.25rem);
  --f-md: clamp(1.13rem, 0.38vi + 1.05rem, 1.5rem);
  --f-lg: clamp(1.27rem, 0.53vi + 1.16rem, 1.8rem);
  --f-xl: clamp(1.42rem, 0.74vi + 1.28rem, 2.16rem);
  --f-2xl: clamp(1.6rem, 0.99vi + 1.4rem, 2.59rem);
  --f-3xl: clamp(1.8rem, 1.31vi + 1.54rem, 3.11rem);
  --f-4xl: clamp(2.03rem, 1.71vi + 1.69rem, 3.73rem);
  --f-5xl: clamp(2.28rem, 2.2vi + 1.84rem, 4.48rem);
}

/* Base text classes - apply to element and all children */
.text-xs, .text-xs * { font-size: var(--f-xs) !important; }
.text-sm, .text-sm * { font-size: var(--f-sm) !important; }
.text-base, .text-base * { font-size: var(--f-base) !important; }
.text-md, .text-md * { font-size: var(--f-md) !important; }
.text-lg, .text-lg * { font-size: var(--f-lg) !important; }
.text-xl, .text-xl * { font-size: var(--f-xl) !important; }
.text-\32xl, .text-\32xl * { font-size: var(--f-2xl) !important; }
.text-\33xl, .text-\33xl * { font-size: var(--f-3xl) !important; }
.text-\34xl, .text-\34xl * { font-size: var(--f-4xl) !important; }
.text-\35xl, .text-\35xl * { font-size: var(--f-5xl) !important; }

/* Max-width breakpoint utilities (apply BELOW this width) */
/* xsm: 320px */
@media (min-width: 320px){
  .xsm\:text-xs, .xsm\:text-xs * { font-size: var(--f-xs) !important; }
  .xsm\:text-sm, .xsm\:text-sm * { font-size: var(--f-sm) !important; }
  .xsm\:text-base, .xsm\:text-base * { font-size: var(--f-base) !important; }
  .xsm\:text-md, .xsm\:text-md * { font-size: var(--f-md) !important; }
  .xsm\:text-lg, .xsm\:text-lg * { font-size: var(--f-lg) !important; }
  .xsm\:text-xl, .xsm\:text-xl * { font-size: var(--f-xl) !important; }
  .xsm\:text-\32xl, .xsm\:text-\32xl * { font-size: var(--f-2xl) !important; }
  .xsm\:text-\33xl, .xsm\:text-\33xl * { font-size: var(--f-3xl) !important; }
  .xsm\:text-\34xl, .xsm\:text-\34xl * { font-size: var(--f-4xl) !important; }
  .xsm\:text-\35xl, .xsm\:text-\35xl * { font-size: var(--f-5xl) !important; }
}

/* sm: 425px */
@media (min-width: 425px){
  .sm\:text-xs, .sm\:text-xs * { font-size: var(--f-xs) !important; }
  .sm\:text-sm, .sm\:text-sm * { font-size: var(--f-sm) !important; }
  .sm\:text-base, .sm\:text-base * { font-size: var(--f-base) !important; }
  .sm\:text-md, .sm\:text-md * { font-size: var(--f-md) !important; }
  .sm\:text-lg, .sm\:text-lg * { font-size: var(--f-lg) !important; }
  .sm\:text-xl, .sm\:text-xl * { font-size: var(--f-xl) !important; }
  .sm\:text-\32xl, .sm\:text-\32xl * { font-size: var(--f-2xl) !important; }
  .sm\:text-\33xl, .sm\:text-\33xl * { font-size: var(--f-3xl) !important; }
  .sm\:text-\34xl, .sm\:text-\34xl * { font-size: var(--f-4xl) !important; }
  .sm\:text-\35xl, .sm\:text-\35xl * { font-size: var(--f-5xl) !important; }
}

/* md: 640px */
@media (min-width: 640px){
  .md\:text-xs, .md\:text-xs * { font-size: var(--f-xs) !important; }
  .md\:text-sm, .md\:text-sm * { font-size: var(--f-sm) !important; }
  .md\:text-base, .md\:text-base * { font-size: var(--f-base) !important; }
  .md\:text-md, .md\:text-md * { font-size: var(--f-md) !important; }
  .md\:text-lg, .md\:text-lg * { font-size: var(--f-lg) !important; }
  .md\:text-xl, .md\:text-xl * { font-size: var(--f-xl) !important; }
  .md\:text-\32xl, .md\:text-\32xl * { font-size: var(--f-2xl) !important; }
  .md\:text-\33xl, .md\:text-\33xl * { font-size: var(--f-3xl) !important; }
  .md\:text-\34xl, .md\:text-\34xl * { font-size: var(--f-4xl) !important; }
  .md\:text-\35xl, .md\:text-\35xl * { font-size: var(--f-5xl) !important; }
}

/* lg: 768px */
@media (min-width: 768px){
  .lg\:text-xs, .lg\:text-xs * { font-size: var(--f-xs) !important; }
  .lg\:text-sm, .lg\:text-sm * { font-size: var(--f-sm) !important; }
  .lg\:text-base, .lg\:text-base * { font-size: var(--f-base) !important; }
  .lg\:text-md, .lg\:text-md * { font-size: var(--f-md) !important; }
  .lg\:text-lg, .lg\:text-lg * { font-size: var(--f-lg) !important; }
  .lg\:text-xl, .lg\:text-xl * { font-size: var(--f-xl) !important; }
  .lg\:text-\32xl, .lg\:text-\32xl * { font-size: var(--f-2xl) !important; }
  .lg\:text-\33xl, .lg\:text-\33xl * { font-size: var(--f-3xl) !important; }
  .lg\:text-\34xl, .lg\:text-\34xl * { font-size: var(--f-4xl) !important; }
  .lg\:text-\35xl, .lg\:text-\35xl * { font-size: var(--f-5xl) !important; }
}

/* xl: 1024px */
@media (min-width: 1024px){
  .xl\:text-xs, .xl\:text-xs * { font-size: var(--f-xs) !important; }
  .xl\:text-sm, .xl\:text-sm * { font-size: var(--f-sm) !important; }
  .xl\:text-base, .xl\:text-base * { font-size: var(--f-base) !important; }
  .xl\:text-md, .xl\:text-md * { font-size: var(--f-md) !important; }
  .xl\:text-lg, .xl\:text-lg * { font-size: var(--f-lg) !important; }
  .xl\:text-xl, .xl\:text-xl * { font-size: var(--f-xl) !important; }
  .xl\:text-\32xl, .xl\:text-\32xl * { font-size: var(--f-2xl) !important; }
  .xl\:text-\33xl, .xl\:text-\33xl * { font-size: var(--f-3xl) !important; }
  .xl\:text-\34xl, .xl\:text-\34xl * { font-size: var(--f-4xl) !important; }
  .xl\:text-\35xl, .xl\:text-\35xl * { font-size: var(--f-5xl) !important; }
}

/* 2xl: 1280px */
@media (min-width: 1280px){
  .\32xl\:text-xs, .\32xl\:text-xs * { font-size: var(--f-xs) !important; }
  .\32xl\:text-sm, .\32xl\:text-sm * { font-size: var(--f-sm) !important; }
  .\32xl\:text-base, .\32xl\:text-base * { font-size: var(--f-base) !important; }
  .\32xl\:text-md, .\32xl\:text-md * { font-size: var(--f-md) !important; }
  .\32xl\:text-lg, .\32xl\:text-lg * { font-size: var(--f-lg) !important; }
  .\32xl\:text-xl, .\32xl\:text-xl * { font-size: var(--f-xl) !important; }
  .\32xl\:text-\32xl, .\32xl\:text-\32xl * { font-size: var(--f-2xl) !important; }
  .\32xl\:text-\33xl, .\32xl\:text-\33xl * { font-size: var(--f-3xl) !important; }
  .\32xl\:text-\34xl, .\32xl\:text-\34xl * { font-size: var(--f-4xl) !important; }
  .\32xl\:text-\35xl, .\32xl\:text-\35xl * { font-size: var(--f-5xl) !important; }
}

/* 3xl: 1440px */
@media (min-width: 1440px){
  .\33xl\:text-xs, .\33xl\:text-xs * { font-size: var(--f-xs) !important; }
  .\33xl\:text-sm, .\33xl\:text-sm * { font-size: var(--f-sm) !important; }
  .\33xl\:text-base, .\33xl\:text-base * { font-size: var(--f-base) !important; }
  .\33xl\:text-md, .\33xl\:text-md * { font-size: var(--f-md) !important; }
  .\33xl\:text-lg, .\33xl\:text-lg * { font-size: var(--f-lg) !important; }
  .\33xl\:text-xl, .\33xl\:text-xl * { font-size: var(--f-xl) !important; }
  .\33xl\:text-\32xl, .\33xl\:text-\32xl * { font-size: var(--f-2xl) !important; }
  .\33xl\:text-\33xl, .\33xl\:text-\33xl * { font-size: var(--f-3xl) !important; }
  .\33xl\:text-\34xl, .\33xl\:text-\34xl * { font-size: var(--f-4xl) !important; }
  .\33xl\:text-\35xl, .\33xl\:text-\35xl * { font-size: var(--f-5xl) !important; }
}

/* 4xl: 1920px */
@media (min-width: 1920px){
  .\34xl\:text-xs, .\34xl\:text-xs * { font-size: var(--f-xs) !important; }
  .\34xl\:text-sm, .\34xl\:text-sm * { font-size: var(--f-sm) !important; }
  .\34xl\:text-base, .\34xl\:text-base * { font-size: var(--f-base) !important; }
  .\34xl\:text-md, .\34xl\:text-md * { font-size: var(--f-md) !important; }
  .\34xl\:text-lg, .\34xl\:text-lg * { font-size: var(--f-lg) !important; }
  .\34xl\:text-xl, .\34xl\:text-xl * { font-size: var(--f-xl) !important; }
  .\34xl\:text-\32xl, .\34xl\:text-\32xl * { font-size: var(--f-2xl) !important; }
  .\34xl\:text-\33xl, .\34xl\:text-\33xl * { font-size: var(--f-3xl) !important; }
  .\34xl\:text-\34xl, .\34xl\:text-\34xl * { font-size: var(--f-4xl) !important; }
  .\34xl\:text-\35xl, .\34xl\:text-\35xl * { font-size: var(--f-5xl) !important; }
}