:root {
    --theme-hero: #096b66;
    --theme-accent: #fed93c;

    --shadow: #000000a8;
    
    --background: #f2ebe3;
    --backshelf: #d6dbdb;
    --backpart: #969696;
    --foreground: #444242;
    --foreshelf: #252525;
    --forepart: #141414;
    --inset: #fffafa;

    --ff-tile: 'Roboto', sans-serif;
    --ff-body: 'Roboto', sans-serif;
}
[data-clr="foreground"] { filter: invert(20%); }
[data-clr="foreshelf"] { filter: invert(10%); }
[data-clr="forepart"] { filter: invert(5%); } 
@media (prefers-color-scheme: light) {
    :root {
        --background: #f2ebe3;
        --backshelf: #d6dbdb;
        --backpart: #969696;
        --foreground: #444242;
        --foreshelf: #252525;
        --forepart: #141414;
        --inset: #fffafa;
        /* --shadow: #000000a8; */
    }
  }
@media (prefers-color-scheme: dark) {
    :root {
        --background: #141414;
        --backshelf: #252525;        
        --backpart: #444242;
        --foreground: #969696;
        --foreshelf: #adadad;
        --forepart:#fffafa ;
        --inset: #030303;
        /* --shadow: #000000a8; */
    }
    [data-clr="foreground"] { filter:invert(79%) sepia(0%) saturate(66%) hue-rotate(171deg) brightness(106%) contrast(81%); }
    [data-clr="foreshelf"] { filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(183deg) brightness(106%) contrast(74%); }
    [data-clr="forepart"] { filter: invert(87%) sepia(2%) saturate(672%) hue-rotate(313deg) brightness(111%) contrast(105%); }
}
a[href]:not([href="#"]) { color: #06c; }
[data-clr="link"] { filter: invert(28%) sepia(47%) saturate(2656%) hue-rotate(192deg) brightness(99%) contrast(108%); }
[data-clr="hero"] { filter: invert(26%) saturate(370%) hue-rotate(128deg) brightness(106%); }
[data-clr="accent"] { filter: invert(88%) sepia(71%) saturate(1820%) hue-rotate(323deg); }