/*
----------------------
App default CSS styles
----------------------
*/

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
    --app-font: "DM Sans", sans-serif;
    
    /* Font weights */
    --font-weight--thin: 100;
    --font-weight--extra-light: 200;
    --font-weight--light: 300;
    --font-weight--regular: 400;
    --font-weight--medium: 500;
    --font-weight--semi-bold: 600;
    --font-weight--bold: 700;
    --font-weight--extra-bold: 800;
    --font-weight--black: 900;
    
    /* Font sizes */
    --font-size--base: 16px;
    --font-size--2: calc(var(--font-size--base) * .125);
    --font-size--4: calc(var(--font-size--base) * .25);
    --font-size--6: calc(var(--font-size--base) * .375);
    --font-size--8: calc(var(--font-size--base) * .5);
    --font-size--10: calc(var(--font-size--base) * .625);
    --font-size--12: calc(var(--font-size--base) * .75);
    --font-size--14: calc(var(--font-size--base) * .875);
    --font-size--16: calc(var(--font-size--base) * 1);
    --font-size--18: calc(var(--font-size--base) * 1.125);
    --font-size--20: calc(var(--font-size--base) * 1.25);
    --font-size--22: calc(var(--font-size--base) * 1.375);
    --font-size--24: calc(var(--font-size--base) * 1.5);
    --font-size--26: calc(var(--font-size--base) * 1.625);
    --font-size--28: calc(var(--font-size--base) * 1.75);
    --font-size--30: calc(var(--font-size--base) * 1.875);
    --font-size--32: calc(var(--font-size--base) * 2);
    --font-size--34: calc(var(--font-size--base) * 2.125);
    --font-size--36: calc(var(--font-size--base) * 2.25);
    --font-size--38: calc(var(--font-size--base) * 2.375);
    --font-size--40: calc(var(--font-size--base) * 2.5);
    --font-size--42: calc(var(--font-size--base) * 2.625);
    --font-size--44: calc(var(--font-size--base) * 2.75);
    --font-size--46: calc(var(--font-size--base) * 2.875);
    --font-size--48: calc(var(--font-size--base) * 3);
    --font-size--50: calc(var(--font-size--base) * 3.125);
    --font-size--52: calc(var(--font-size--base) * 3.25);
    --font-size--54: calc(var(--font-size--base) * 3.375);
    --font-size--56: calc(var(--font-size--base) * 3.5);
    --font-size--58: calc(var(--font-size--base) * 3.625);
    --font-size--60: calc(var(--font-size--base) * 3.75);
    --font-size--62: calc(var(--font-size--base) * 3.875);
    --font-size--64: calc(var(--font-size--base) * 4);
    --font-size--66: calc(var(--font-size--base) * 4.125);
    --font-size--68: calc(var(--font-size--base) * 4.25);
    --font-size--70: calc(var(--font-size--base) * 4.375);
    --font-size--72: calc(var(--font-size--base) * 4.5);
    --font-size--74: calc(var(--font-size--base) * 4.625);
    --font-size--76: calc(var(--font-size--base) * 4.75);
    --font-size--78: calc(var(--font-size--base) * 4.875);
    --font-size--80: calc(var(--font-size--base) * 5);
    --font-size--82: calc(var(--font-size--base) * 5.125);
    --font-size--84: calc(var(--font-size--base) * 5.25);
    --font-size--86: calc(var(--font-size--base) * 5.375);
    --font-size--88: calc(var(--font-size--base) * 5.5);
    --font-size--90: calc(var(--font-size--base) * 5.625);
    --font-size--92: calc(var(--font-size--base) * 5.75);
    --font-size--94: calc(var(--font-size--base) * 5.875);
    --font-size--96: calc(var(--font-size--base) * 6);
    --font-size--98: calc(var(--font-size--base) * 6.125);
    --font-size--100: calc(var(--font-size--base) * 6.25);
    --font-size--102: calc(var(--font-size--base) * 6.375);
    --font-size--104: calc(var(--font-size--base) * 6.5);
    --font-size--106: calc(var(--font-size--base) * 6.625);
    --font-size--108: calc(var(--font-size--base) * 6.75);
    --font-size--110: calc(var(--font-size--base) * 6.875);
    
    /* Font styles */
    --font-style--italic: italic;
    --font-style--underline: underline;
    --font-style--oblique: oblique;
    
    .text.text-14 {
        font-size: var(--font-size--14);
    }
    
    .text.text-16 {
        font-size: var(--font-size--16);
    }
    
    .text.text-18 {
        font-size: var(--font-size--18);
    }
    
    .text.text-20 {
        font-size: var(--font-size--20);
    }
    
    .text.text-22 {
        font-size: var(--font-size--22);
    }
    
    .text.thin {
        font-weight: var(--font-weight--thin);
    }
    
    .text.extra-light {
        font-weight: var(--font-weight--extra-light);
    }
    
    .text.light {
        font-weight: var(--font-weight--light);
    }
    
    .text.medium {
        font-weight: var(--font-weight--medium);
    }
    
    .text.semi-bold {
        font-weight: var(--font-weight--semi-bold);
    }
    
    .text.bold {
        font-weight: var(--font-weight--bold);
    }
    
    .text.extra-bold {
        font-weight: var(--font-weight--extra-bold);
    }
    
    .text.black {
        font-weight: var(--font-weight--black);
    }
    
    .text.italic {
        font-style: var(--font-style--italic);
    }
    
    .text.underline {
        text-decoration: var(--font-style--underline);
    }
    
    .text.oblique {
        font-style: var(--font-style--oblique);
    }
}