:root {
    --color-default-text: white;
    --color-accent: #0f6ab4;
    --color-accent-lighter: color-mix(in hsl, #0f6ab4, white 50%);
    --color-secondary: #0f6ab4;
    --color-button-background: #0c3556;
    --color-article-background: #051827;
    --shadow-default: 2px 4px 6px #0000006d;
}



/* --------- Font Sizes --------------- */
:root {
    --font-ratio: 1;
}

:root {
    /* below the base */
    --font-size-2b: calc(0.5625*var(--font-size));
    --font-size-1b: calc(0.75*var(--font-size));

    /* the base */
    --font-size: calc(1rem * var(--font-ratio));

    /* above the base */
    --font-size-1: calc(1.3125*var(--font-size));
    --font-size-2: calc(1.8125 *var(--font-size));
    --font-size-3: calc(2.375 *var(--font-size));
    --font-size-4: calc(3.1875 *var(--font-size));
    --font-size-5: calc(4.25 *var(--font-size));
    --font-size-6: calc(5.6875 *var(--font-size));
}

/* --- Line Heights --- */

:root {
    /* below the base */
    --line-height-2b: calc(1.7778 * var(--font-ratio));
    --line-height-1b: calc(1.6667 * var(--font-ratio));

    /* the base */
    --line-height: calc(1.5 * var(--font-ratio));

    /* above the base */
    --line-height-1: calc(1.3333 * var(--font-ratio));
    --line-height-2: calc(1.2414 * var(--font-ratio));
    --line-height-3: calc(1.2632 * var(--font-ratio));
    --line-height-4: calc(1.1765 * var(--font-ratio));
    --line-height-5: calc(1.1176 * var(--font-ratio));
    --line-height-6: calc(1.0989 * var(--font-ratio));
}

/* --- Letter Spacings --- */

:root {
    /* below the base */
    --letter-space-2b: calc(0.0856em * var(--font-ratio));
    --letter-space-1b: calc(0.0567em * var(--font-ratio));

    /* the base */
    --letter-space: calc(0.035em * var(--font-ratio));

    /* above the base */
    --letter-space-1: calc(0.0195em * var(--font-ratio));
    --letter-space-2: calc(0.0059em * var(--font-ratio));
    --letter-space-3: calc(-0.0026em * var(--font-ratio));
    --letter-space-4: calc(-0.0096em * var(--font-ratio));
    --letter-space-5: calc(-0.0147em * var(--font-ratio));
    --letter-space-6: calc(-0.0186em * var(--font-ratio));
}

/* ------------------------------
 | Examples
 */

/* --- Default Text --- */

body {
    font-weight: 400;
    font-size: var(--font-size);
    line-height: var(--line-height);
    letter-spacing: var(--letter-space);
}

/* --- Headers --- */

:is(h1, h2, h3) {
    font-weight: 600;
}

h1 {
    font-size: var(--font-size-3);
    line-height: var(--line-height-3);
    letter-spacing: var(--letter-space-3);
}

h2 {
    font-size: var(--font-size-1);
    line-height: var(--line-height-1);
    letter-spacing: var(--letter-space-1);
}

/* --- Alternative Text Sizes --- */

:is(p, span, a, ul, ol, dl, li, dt, dd, label, blockquote, code) {
    &.small-text {
        font-size: var(--font-size-1b);
        line-height: var(--line-height-1b);
        letter-spacing: var(--letter-space-1b);
    }

    &.large-text {
        font-size: var(--font-size-1);
        line-height: var(--line-height-1);
        letter-spacing: var(--letter-space-1);
    }
}