/*
    The used colors are:
    - text-color: Used for text.
    - background-color: Used for the background of the page.
    - primary-color: Theme color, used for links, special interactable elements, certain highlights, etc.
    - secondary-color: Theme color, used when you need a second 'primary' color.

    Each color then has certain variants:
    - shade: Used for things like shadows, etc.
    - contrast: Used for text on top of the color.
    - highlight: Used for things like hover effects, etc.
*/

html {
    /* primary-color */
    --primary-color: #21819f;
    --primary-color-shade: #0e333f;
    --primary-color-contrast: #ffffff;
    --primary-color-highlight: #2698BA;
    /* secondary-color */
    --secondary-color: #f13c82;
    --secondary-color-shade: #6b1939;
    --secondary-color-contrast: #ffffff;
    --secondary-color-highlight: #ff73a9;
    /* text-color */
    --text-color: #0c0c0d;
    --text-color-shade: #0e0e0f;
    --text-color-contrast: #ffffff;
    --text-color-highlight: #2d2d2e;
    /* background-color */
    --background-color: #F8F8F8;
    --background-color-shade: #ffffff;
    --background-color-contrast: rgba(0, 0, 0, .1);
    --background-color-highlight: #f2f2f2;
}

    html[data-theme='dark'] {
        /* primary-color */
        --primary-color: #21819f;
        --primary-color-shade: #0e333f;
        --primary-color-contrast: #ffffff;
        --primary-color-highlight: #2698BA;
        /* secondary-color */
        --secondary-color: #f13c82;
        --secondary-color-shade: #6b1939;
        --secondary-color-contrast: #ffffff;
        --secondary-color-highlight: #ff73a9;
        /* text-color */
        --text-color: #e8e8e8;
        --text-color-shade: #bcbcbc;
        --text-color-contrast: #ffffff;
        --text-color-highlight: #ffffff;
        /* background-color */
        --background-color: #1C1C1D;
        --background-color-shade: #212529;
        --background-color-contrast: #424246;
        --background-color-highlight: #2d2d2e;
    }