:root {
    /* font Sizes */
    --font-8 : 0.5rem;
    --font-10: 0.625rem;
    --font-12: 0.75rem;
    --font-14: 0.875rem;
    --font-16: 1rem;
    --font-18: 1.125rem;
    --font-20: 1.25rem;
    --font-24: 1.5rem;
    --font-28: 1.75rem;
    --font-30: 1.875rem;
    --font-32: 2rem;
    --font-36: 2.25rem;
    --font-48: 3rem;

    /* font Weights */
    --font-100: 100;
    --font-200: 200;
    --font-300: 300;
    --font-400: 400;
    --font-500: 500;
    --font-600: 600;
    --font-700: 700;
    --font-800: 800;
    --font-900: 900;
}

/* font family styles */
.font-thin {
    font-weight: var(--font-100);
}
.font-extra-light {
    font-weight: var(--font-200);
}
.font-light {
    font-weight: var(--font-300);
}
.font-regular {
    font-weight: var(--font-400);
}
.font-medium {
    font-weight: var(--font-500);
}
.font-semibold {
    font-weight: var(--font-600);
}
.font-bold {
    font-weight: var(--font-700);
}
.font-extra-bold {
    font-weight: var(--font-800);
}
.font-black {
    font-weight: var(--font-900);
}

/* font-sizes */
.text-h1 {
    font-size: var(--font-48); /*48px */
}
.text-h2 {
    font-size: var(--font-36); /*36px */
}
.text-h3 {
    font-size: var(--font-30); /*30px */
}
.text-h4 {
    font-size: var(--font-28); /*28px */
}
.text-h5 {
    font-size: var(--font-24); /*24px */
}
.text-h6 {
    font-size: var(--font-20); /*20px */
}
.text-tl {
    font-size: var(--font-18); /*18px */
}
.text-tm {
    font-size: var(--font-16); /*16px */
}
.text-ts {
    font-size: var(--font-14); /*14px */
}
.text-txs {
    font-size: var(--font-12); /*12px */
}
.text-tdxs {
    font-size: var(--font-10); /*10px */
}
.text-tdxxs{
    font-size: var(--font-8); /*8px */
}