:root {
    /* Base 16px */

    --fs-050: 0.75rem; /* 12px */
    --fs-100: 0.875rem; /* 14px */
    --fs-200: 1rem; /* 16px */
    --fs-300: 1.125rem; /* 18px */
    --fs-400: 1.25rem; /* 20px */
    --fs-500: 1.5rem; /* 24px */
    --fs-600: 1.75rem; /* 28px */
    --fs-700: 2rem; /* 32px */
    --fs-800: 2.5rem; /* 40px */
    --fs-900: 3rem; /* 48px */
}

/* Utility classes */

.fs-050 { /* 12px */
    font-size: var(--fs-050);
}

.fs-100 { /* 14px */
    font-size: var(--fs-100);
}

.fs-200 { /* 16px */
    font-size: var(--fs-200);
}

.fs-300 { /* 18px */
    font-size: var(--fs-300);
}

.fs-400 { /* 20px */
    font-size: var(--fs-400);
}

.fs-500 { /* 24px */
    font-size: var(--fs-500);
}

.fs-600 { /* 28px */
    font-size: var(--fs-600);
}

.fs-700 { /* 32px */
    font-size: var(--fs-700);
}

.fs-800 { /* 40px */
    font-size: var(--fs-800);
}

.fs-900 { /* 48px */
    font-size: var(--fs-900);
}


/* 12px → 14px */
.fs-050-100 {
    font-size: clamp(0.75rem, 0.55rem + 1vw, 0.875rem);
}

/* 14px → 16px */
.fs-100-200 {
    font-size: clamp(0.875rem, 0.65rem + 1vw, 1rem);
}

/* 16px → 18px */
.fs-200-300 {
    font-size: clamp(1rem, 0.75rem + 1vw, 1.125rem);
}

/* 18px → 20px */
.fs-300-400 {
    font-size: clamp(1.125rem, 0.85rem + 1vw, 1.25rem);
}