:root {

    /*     ######  #####  ##       #####  ######     */
    /*    ###     ##   ## ##      ##   ## ##   ##    */
    /*    ##      ##   ## ##      ##   ## ######     */
    /*    ###     ##   ## ##      ##   ## ##  ##     */
    /*     ######  #####  #######  #####  ##   ##    */
    /*
        use color-mix() with transparent to add transparency
        https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#adding_transparency
    */

    &[data-color-scheme="light"] {
        /* light gray */
        --color-01-l: 90%;
        --color-01-a: 0%;
        --color-01-b: 0%;

        /* black */
        --color-02-l: 0%;
        --color-02-a: 0%;
        --color-02-b: 0%;
    }

    &[data-color-scheme="dark"] {
        /* black */
        --color-01-l: 0%;
        --color-01-a: 0%;
        --color-01-b: 0%;

        /* light gray */
        --color-02-l: 90%;
        --color-02-a: 0%;
        --color-02-b: 0%;
    }


    --color-01: oklab(var(--color-01-l) var(--color-01-a) var(--color-01-b));
    --color-01-light: oklab(calc(var(--color-01-l) + 25%) var(--color-01-a) var(--color-01-b));
    --color-01-dark: oklab(calc(var(--color-01-l) - 25%) var(--color-01-a) var(--color-01-b));

    --color-02: oklab(var(--color-02-l) var(--color-02-a) var(--color-02-b));
    --color-02-light: oklab(calc(var(--color-02-l) + 25%) var(--color-02-a) var(--color-02-b));
    --color-02-dark: oklab(calc(var(--color-02-l) - 25%) var(--color-02-a) var(--color-02-b));

    --link-color-01: var(--text-color-01);
    --link-decoration-01: none;
    --link-hover-color-01: var(--text-color-01);
    --link-hover-decoration-01: underline;

    --success-color: oklab(60.735% -40.534% 31.334%);
    --info-color: oklab(61.465% -23.829% -17.445%);
    --warning-color: oklab(82.103% 10.93% 66.106%);
    --danger-color: oklab(50.864% 51.073% 25.414%);




    /*     ###### ######   #####   ###### ###### ##   ##  ######    */
    /*    ##      ##   ## ##   ## ###       ##   ###  ## ##         */
    /*     #####  ######  ####### ##        ##   ## # ## ##  ###    */
    /*         ## ##      ##   ## ###       ##   ##  ### ##   ##    */
    /*    ######  ##      ##   ##  ###### ###### ##   ##  #####     */


    --space: 1lh;
    --eighth-space: calc(var(--space) * .125);
    --quarter-space: calc(var(--space) * .25);
    --half-space: calc(var(--space) * .5);
    --three-quarter-space: calc(var(--space) * .75);
    --one-and-quarter-space: calc(var(--space) * 1.25);
    --one-and-half-space: calc(var(--space) * 1.5);
    --one-and-three-quarter-space: calc(var(--space) * 1.75);
    --double-space: calc(var(--space) * 2);
    --tripple-space: calc(var(--space) * 3);




    /*     ###### ###### ####### ###### ##   ##  ######    */
    /*    ##        ##       ##    ##   ###  ## ##         */
    /*     #####    ##      #      ##   ## # ## ##  ###    */
    /*         ##   ##    ##       ##   ##  ### ##   ##    */
    /*    ######  ###### ####### ###### ##   ##  #####     */


    --site-max-width: 1440px;

    /* grid.css */
    --content-gap: var(--double-space);
    --content-padding: clamp(var(--space), 5dvw, var(--tripple-space));
    --site-padding: max(5dvw, 10px);
    --max-content-width: calc(var(--site-max-width) - var(--content-padding) * 2);
}