/* Import google fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Setup typography */
body { font-family: 'Open Sans', sans-serif;}

/* Text styles */
/* TODO => double, wavy, dotted, dashed for overline and underline */
.cursive { font-style: italic;}
.line-through { text-decoration: line-through;}
.overlined { text-decoration: overline;}
.underlined { text-decoration: underline;}
.double-line { text-decoration: underline double;}
.wavy-line { text-decoration: underline wavy;}
.dotted-line { text-decoration: underline dotted;}
.dashed-line { text-decoration: underline dashed;}

/* Text highlighting */
.highlighted-primary {
    color: var(--highlight-primary);
}

.highlighted-accent {
    color: var(--highlight-accent);
}

.highlighted-secondary {
    color: var(--highlight-secondary);
}

/* Text align */
.text-start,
.text-left { text-align: left;}
.text-center { text-align: center;}
.text-end,
.text-right { text-align: left;}
.text-justify { text-align: justify;}

/* Headlines */
h1, h2, h3, h4, h5, h6, 
.headline-1, .headline-2, 
.headline-3, .headline-4, 
.headline-5, .headline-6 {
    font-family: 'Poppins', sans-serif;
    color: var(--text);
}

h1, .headline-1 {
    font-size: 56px;
    font-weight: 900;
    line-height: 72px;
}

h2, .headline-2 {
    font-size: 40px;
    font-weight: 800;
    line-height: 56px;
}

h3, .headline-3 {
    font-size: 28px;
    font-weight: 800;
    line-height: 40px;
}

h4, .headline-4 {
    font-size: 26px;
    font-weight: 700;
    line-height: 32px;
}

h5, .headline-5 {
    font-size: 22px;
    font-weight: 700;
    line-height: 32px;
}

h6, .headline-6 {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

/* Text */
p, span, a {
    font-family: 'Open Sans', sans-serif;
    color: var(--text);
}

p, .text, .text-l {
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
}

/* Text sizes */
.text-m {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.text-s {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}