:root {
    --clr-primary-100: #FBFAF6;
    --clr-primary-100-75: #C0BFBB;
    --clr-primary-100-60: #9D9C98;
    --clr-primary-100-35: #61605D;

    --clr-primary-900: #0E0E0B;
    --clr-primary-900-75: #494946;
    --clr-primary-900-60: #6C6C69;
    --clr-primary-900-35: #A8A8A4;
    --clr-primary-900-highlight-75: #474408;

    --clr-secondary-150: #f1f1ee;
    --clr-secondary-750: #151514;
    --clr-secondary-850: #10100f;
    
    /* Pantone 3945C */
    --clr-highlight-500: #f3E600;

    --clr-red: #B80B00;
}
*:not(img, svg)::selection {
    color: var(--clr-primary-900);
    background-color: var(--clr-highlight-500);
}
:is(img, svg)::selection {
    color: var(--clr-primary-900);
    background-color: var(--clr-primary-900);
}
:where(body[data-background="dark"], .dark-body) :is(img, svg)::selection {
    color: var(--clr-primary-900);
    background-color: var(--clr-primary-100);
}
.selection-reverse::selection, .selection-reverse *::selection {
    background-color: var(--clr-primary-900);
    color: var(--clr-highlight-500);
}
.highlight *::selection {
    background-color: var(--clr-primary-900);
    color: var(--clr-highlight-500);
}
.highlight .selection-reverse::selection, .highlight .selection-reverse *::selection {
    background-color: var(--clr-highlight-500);
    color: var(--clr-primary-900);
}

html {
    accent-color: var(--clr-highlight-500);
    scrollbar-color: var(--clr-secondary-150) var(--clr-secondary-850);
}

body {
    transition: color 0.5s var(--default-animation),
                background-color 0.5s var(--default-animation),
                fill 0.5s var(--default-animation);
}
body[id*=light] {
    color: var(--clr-primary-900);
    background-color: var(--clr-primary-100);
}

body#light-300 {
    background-color: var(--clr-secondary-300);  
}
body#light-400 {
    background-color: var(--clr-primary-400);
}

body {
    color: var(--clr-primary-900);
    background-color: var(--clr-primary-100);
}
body[id*=dark] {
    color: var(--clr-primary-100);
    background-color: var(--clr-primary-900);
}
body.dark-body {
    background-color: var(--clr-primary-900);  
}