/* Font Sizes */
:root {
    --font-size-xs: 0.75rem;     /* 12px / 16px = 0.75rem */
    --font-size-sm: 0.875rem;    /* 14px / 16px = 0.875rem */
    --font-size-md: 1rem;        /* 16px / 16px = 1rem */
    --font-size-lg: 1.125rem;    /* 18px / 16px = 1.125rem */
    --font-size-xl: 1.25rem;     /* 20px / 16px = 1.25rem */
    --font-size-xxl: 1.5rem;     /* 24px / 16px = 1.5rem */
    --font-size-xxxl: 2rem;      /* 32px / 16px = 2rem */
    --font-size-display: 2.5rem; /* 40px / 16px = 2.5rem */
    --font-size-big: 3rem;       /* 48px / 16px = 3rem */
    --font-size-giant: 3.5rem;   /* 56px / 16px = 3.5rem */
    --font-size-huge: 4rem;      /* 64px / 16px = 4rem */
}

/* Font Size Classes */
.font-size-xs {
    font-size: var(--font-size-xs);
}

.font-size-sm {
    font-size: var(--font-size-sm);
}

.font-size-md {
    font-size: var(--font-size-md);
}

.font-size-lg {
    font-size: var(--font-size-lg);
}

.font-size-xl {
    font-size: var(--font-size-xl);
}

.font-size-xxl {
    font-size: var(--font-size-xxl);
}

.font-size-xxxl {
    font-size: var(--font-size-xxxl);
}

.font-size-display {
    font-size: var(--font-size-display);
}

.font-size-big {
    font-size: var(--font-size-big);
}

.font-size-giant {
    font-size: var(--font-size-giant);
}

.font-size-huge {
    font-size: var(--font-size-huge);
}

/* Typography Utility Classes */
.text-xs {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-lg);
}

.text-sm {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-lg);
}

.text-md {
    font-size: var(--font-size-md);
    line-height: var(--line-height-lg);
}

.text-lg {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
}

.text-xl {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-lg);
}

.text-xxl {
    font-size: var(--font-size-xxl);
    line-height: var(--line-height-lg);
}

.text-xxxl {
    font-size: var(--font-size-xxxl);
    line-height: var(--line-height-md);
}

.text-display {
    font-size: var(--font-size-display);
    line-height: var(--line-height-md);
}

.text-big {
    font-size: var(--font-size-big);
    line-height: var(--line-height-md);
}

.text-giant {
    font-size: var(--font-size-giant);
    line-height: var(--line-height-sm);
}

.text-huge {
    font-size: var(--font-size-huge);
    line-height: var(--line-height-sm);
}