:root {
    --spacing: 0.25rem;

    --text-button-color: #f7f7f4;
    --background-button-color: #007ACC;
    --background-button-color2: hsl(118, 100%, 32%);
    --background-button-color3: hwb(9 0% 36%);
    --background-button-color4: lab(33.73% 66.06 -51.64);
    --background-button-color5: lch(58.92% 33.73 207.42);
    --background-button-color6: #7d7d7d;
}

html[data-theme="light"] {
    --background-side-color: hsl(0, 0%, 97%);
    --background-light-color: hsl(0, 0%, 85%);
    --background-color: hsl(0, 0%, 100%);
    --background-loading-color: hsl(0, 0%, 100%, 0.8);
    --border-side-color: hsl(0, 0%, 90%);
    --icon-color: #7d7d7d;
    --icon-hover-color: #171717;
    --scrollbar-color: #cacacaa1;
    --text-color: #333333;
}

html[data-theme="dark"] {
    --background-side-color: hsl(0, 0%, 5%);
    --background-light-color: hsl(0, 0%, 15%);
    --background-color: hsl(0, 0%, 0%);
    --background-loading-color: hsla(0, 0%, 0%, 0.8);
    --border-side-color: hsl(0, 0%, 12%);
    --icon-color: #a0a0a0;
    --icon-hover-color: #ededed;
    --scrollbar-color: #464646a1;
    --text-color: #cccccc;
}