/* Root Variables */
:root {
    /* Font-Family */
    --ff-primary: 'Geist';

    /* 393 -> 1440 */
    /* Font-Sizes */ /* assisted by utopia.fyi 768 -> 2560 */
    --fs-xl: clamp(2rem, 1.3431rem + 2.6743vw, 3.75rem);
    --fs-ll: clamp(2rem, 1.6246rem + 1.5282vw, 3rem);
    --fs-l: clamp(1rem, 0.6246rem + 1.5282vw, 2rem);
    --fs-m: clamp(1rem, 0.8123rem + 0.7641vw, 1.5rem);
    --fs-s: clamp(0.875rem, 0.7342rem + 0.5731vw, 1.25rem);
    --fs-xs: clamp(0.875rem, 0.8281rem + 0.191vw, 1rem);
    --fs-xxs: clamp(0.75rem, 0.6964rem + 0.1116vw, 0.875rem);

    /* Font Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 800;
}

body {
    font-family: var(--ff-primary);
}

.text-h1{
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
}

.text-h2{
    font-size: var(--fs-l);
    font-weight: var(--fw-bold);
}

.text-h3{
    font-size: var(--fs-m);
    font-weight: var(--fw-bold);
}

.text-sub-h1{
    font-size: var(--fs-m);
    font-weight: var(--fw-regular);
}

.text-sub-h2{
    font-size: var(--fs-s);
    font-weight: var(--fw-regular);
}

.text-sub-h3{
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
}

.text-navbar{
    font-size: var(--fs-s);
    font-weight: var(--fw-medium);
}

.btn{
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
}

.select{
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
}

/* text utility */
.text-fs-xxs{ font-size: var(--fs-xxs); }
.text-fs-xs{ font-size: var(--fs-xs); }
.text-fs-s{ font-size: var(--fs-s); }
.text-fs-m{ font-size: var(--fs-m); }
.text-fs-l{ font-size: var(--fs-l); }
.text-fs-ll{ font-size: var(--fs-ll); } /*didn't plan out everything*/
.text-fs-xl{ font-size: var(--fs-xl); }

.text-fw-regular{ font-weight: var(--fw-regular);}
.text-fw-medium{ font-weight: var(--fw-medium);}
.text-fw-semi-bold{ font-weight: var(--fw-semi-bold);}
.text-fw-bold, strong, b{ font-weight: var(--fw-bold);}

.text-fw-italic{ font-style: italic; }

.text-underline{ text-decoration: underline; }
