/* BLACK - WHITE contrast
Background is white, foreground is black
*/

html.contrast-bw {
    --foreground-100: hsla(0, 0%, 0%, 1);
    --foreground-95: hsla(0, 0%, 8%, 1);
    --foreground-85: hsla(0, 0%, 15%, 1);
    --foreground-70: hsla(0, 0%, 25%, 1);
    --foreground-55: hsla(0, 0%, 40%, 1);
    --foreground-40: hsla(0, 0%, 55%, 1);
    --foreground-25: hsla(0, 0%, 75%, 1);
    --foreground-10: hsla(0, 0%, 90%, 1);
    --foreground-0: hsla(0, 0%, 100%, 1);

    --accent: var(--foreground-100);
    --on-accent: var(--foreground-0);
}


html.contrast-bw button:not(:has(img)), 
html.contrast-bw a:not(:has(img)) {
    border: 1px solid var(--foreground-100);
} 

/* WHITE - BLACK contrast
Background is black, foreground is white
*/
html.contrast-wb {
    --foreground-100: hsla(0, 0%, 100%, 1);
    --foreground-95: hsla(0, 0%, 92%, 1);
    --foreground-85: hsla(0, 0%, 85%, 1);
    --foreground-70: hsla(0, 0%, 75%, 1);
    --foreground-55: hsla(0, 0%, 60%, 1);
    --foreground-40: hsla(0, 0%, 45%, 1);
    --foreground-25: hsla(0, 0%, 25%, 1);
    --foreground-10: hsla(0, 0%, 10%, 1);
    --foreground-0: hsla(0, 0%, 0%, 1);

    --accent: var(--foreground-0);
    --on-accent: var(--foreground-100);
}

html.contrast-wb button:not(:has(img)), 
html.contrast-wb a:not(:has(img)) {
    border: 1px solid var(--foreground-100);
}