@import "_dimensions.css";
@import "_fonts.css";

/*
    notes:

    1. you will find some classes mentioned on some screens and other not mentioned 
        reason: the UX still working on them
*/

/*
    index for the document
    1. general font sizes
    2. font sizes  
    3. font weight
*/

/*
    classes for font sizes
*/

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

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

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

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

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

.norma--f-xs {
    font-size: var(--norma--font-xs);
}

.norma--f-xxs {
    font-size: var(--norma--font-xxs);
}

/*
    @what: default headings for all screens, followed desktop-first approach
    @why: as normal is meant to be viewed in bigger screens
*/
.norma--h1 {
    font-size: var(--norma--font-xxl);
}

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

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

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

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

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

.norma--p-special {
    font-size: var(--norma--font-xs) !important;
}

/*
    @what: font sizes for the biggest screen
    @why: as normal is meant to be viewed in bigger screens 
    @why 1920.1 to apply the below after .1px
*/

@media screen and (min-width: 1920.1px) {
    .norma--h1 {
        font-size: var(--norma--font-xxl);
    }

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

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

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

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

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

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

    .norma--p-special {
        font-size: var(--norma--font-xs) !important;
    }
}

/*
    @what: font sizes for the third screen
    @why: to change automatically when the user open in the specified media query
*/
@media screen and (max-width: 1280px) {
    .norma--h1 {
        font-size: var(--norma--font-xxl);
    }

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

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

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

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

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

    .norma--seconary-p {
        font-size: var(--norma--font-xs);
    }

    .norma--p-special {
        font-size: var(--norma--font-xxs) !important;
    }
}

/*
    @what: font sizes for the fourth screen
    @why: to change automatically when the user open in the specified media query
*/
@media screen and (max-width: 1024px) {
    .norma--h1 {
        font-size: var(--norma--font-xxl);
    }

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

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

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

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

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

    .norma--seconary-p {
        font-size: var(--norma--font-xs);
    }

    .norma--p-special {
        font-size: var(--norma--font-xxs) !important;
    }
}

/*
    @what: font sizes for the fifth screen aka. mobile screen
    @why: to change automatically when the user open in the specified media query
*/
@media screen and (max-width: 360px) {
    .norma--h1 {
        font-size: var(--norma--font-xxl);
    }

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

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

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

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

    .norma--p {
        font-size: var(--norma--font-xs);
    }

    .norma--seconary-p {
        font-size: var(--norma--font-xs);
    }

    .norma--caption {
        font-size: var(--norma--font-xxs);
    }

    .norma--p-special {
        font-size: var(--norma--font-xxs) !important;
    }
}

/*
    font weights
*/
.norma--bold {
    font-weight: var(--norma--fw-bold) !important;
}

.norma--medium {
    font-weight: var(--norma--fw-medium) !important;
}

.norma--regular {
    font-weight: var(--norma--fw-regular) !important;
}

.norma--light {
    font-weight: var(--norma--fw-light) !important;
}