/* Color scheme. */

:root {
    /* naturally */
    --liquidex-brand-blue: #058ef0;
    /* but also: */
    --liquidex-brand-red: #eb134a;
    --liquidex-brand-yellow: #ffc31f;
    --liquidex-brand-green: #06ca4a;

    --text-color-light: #55423e;
    --link-color-light: #004ec8;
    --link-color-visited-light: #6c2380;

    --background-color: rgb(255, 253, 246);
    --background-color-tooltip: rgb(226, 223, 214);
    --text-color: #55423e;
    --link-color: #004ec8;
    --link-color-visited: #6c2380;

    --shaded-background: rgba(0, 0, 0, 5%);
    --border-1: rgba(0, 0, 0, 15%);
    --border-2: rgba(0, 0, 0, 30%);
    --hover: rgba(0, 0, 0, 15%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: rgb(30, 40, 53);
        --background-color-tooltip: rgb(23, 31, 41);
        --text-color: #d7cdbf;
        --link-color: #93cce8;
        --link-color-visited: #f7afde;

        --shaded-background: #f7e5df0c;
        --border-0: #f7e5df1a;
        --border-1: #f7e5df26;
        --border-1-and-a-half: #f7e5df3a;
        --border-2: #f7e5df4d;
    }
}

:root {
    /* Font size-responsive measurements. treehouse was designed against a font size of 14px;
       each of these sizes is (n / 14)rem where n is the number of pixels. */
    --1px: 0.07142857143rem;
    --2px: 0.1428571429rem;
    --3px: 0.2142857143rem;
    --4px: 0.2857142857rem;
    --6px: 0.4285714286rem;
    --8px: 0.5714285714rem;
    --10px: 0.7142857143rem;
    --12px: 0.8571428571rem;
    --16px: 1.142857143rem;
}

/* Reset things to more sensible sizing rules */

* {
    box-sizing: border-box;
}