/* Variables
/* ---------------------------------------------------------- */

:root {

    /* Colours */
    --color-font: #f5f5f5;
    --color-content-font: #d4d4d4;
    --color-content-heading: #f5f5f5;
    --color-metadata-font: rgb(163 163 163);
    --color-link-hover: rgba(229, 229, 229, 0.809);
    --footer-height: 100px;

    --color-code: #b3532e;
    --color-base: #050A30;
    --color-success: #80b912;
    --color-error: #f05230;

    /* Fonts */
    --font-light: 100;
    --font-normal: 400;
    --font-bold: 700;
    --font-heavy: 800;
    --font-content-size: 16px;
    --font-metadata-size: 12px;
    --font-code-size: 14px;

}

:root[data-theme="light"] {
    --color-font: #000000;
    --color-content-font: #1a1a1a;
    --color-content-heading: #000000;
    --color-metadata-font: rgb(90 90 90);
    --color-link-hover: rgba(0, 0, 0, 0.6);
    --color-base: #f0f0f0;
}

:root {
    /* Breakpoints */
    --xlarge: 1680px;
    --large: 1280px;
    --medium: 980px;
    --small: 740px;
    --xsmall: 480px;
}