:root {

    /* grid */
    --gap: 0.5em;
    --row-gap: 0.5em;

    /* colors */
    --color-text: hsl(55, 10%, 15%);
    //--color-background: hsl(60, 20%, 98%);
    --color-background: #fff;
    --color-background-input: var(--color-background, #fff);
    --color-text-neg: var(--color-background);
    --color-focus: hsl(170, 70%, 25%);
    --color-focus-text: var(--color-focus);


    --color-background-hover: var(--color-focus);
    --color-text-hover: var(--color-text-neg);

    --color-border: #999;
    --color-border-button: var(--color-border);
    --color-background-button: var(--color-focus);

    --color-icon: var(--color-focus);
    --color-icon-bg: var(--color-background-input);

    /* inputs */
    --padding-input: 0.3em;
    --border-width-input: 2px;
    --border-radius: 0.3em;
    --filter-focus: drop-shadow(0 0 0.2rem var(--color-focus));

    /* range */
    --color-range-track: var(--color-text);
    --color-range-thumb: var(--color-focus);
    --height-range-track: 2px;

    /* scrollbars */
    --scroll-thumb: #000;
    --scroll-width: 8px;
    --color-scroll-track: var(--color-text);
    --color-scroll-bg: var(--color-background);

    --color-scroll-thumb: var(--color-focus);
    --color-scroll-thumb-body: var(--color-focus);
    --color-scroll-thumb-hover: var(--color-focus);


    /* icons */
    --icn-color: var(--color-focus);
    --icn-margin: 0.3em;
    --icon-width: 1em;
    --icn-stroke-width: 2px;
    --icn-scale: 1.333;
    /* --icn-basline-shift: -0.075em; */
    --icn-basline-shift: 0em;

    --resizer-size:1.5rem;

}


.darkmode {


    /* colors */
    //--color-text: hsl(55, 10%, 15%);
    --color-text: hsl(60, 20%, 95%);
    --color-background: hsl(55, 50%, 5%);
    --color-background-input: var(--color-background);
    --color-text-neg: var(--color-text);
    --color-focus: hsl(170, 25%, 35%);
    --color-focus-text: var(--color-text);

    --color-background-hover: var(--color-focus);
    --color-text-hover: var(--color-text-neg);


    --color-border: hsl(170, 25%, 30%);
    --color-border-button: var(--color-border);
    --color-background-button: var(--color-focus);

    --color-icon: var(--color-focus);
    --color-icon: hsl(170, 25%, 45%);
    //--color-icon-bg: hsl(55, 10%, 60%);
    --color-icon-bg: var(--color-background);
    --filter-focus: drop-shadow(0 0 0.5rem var(--color-icon));



    /* range */
    --color-range-track: var(--color-focus);
    --color-range-thumb: var(--color-icon);

}