/* define light and dark themes, and respect the system preference for using dark themes */
:root { 
    --abinb-black: 18, 18, 18;
    --abinb-darkgray: 51, 51, 51;
    --abinb-gray: 191, 191, 191;
    --abinb-lightgray: 200, 200, 200;
    --abinb-white: 255, 255, 255;
    --abinb-darkblue: 8, 51, 55;
    --abinb-lightblue: 172, 235, 243;
    --abinb-lightorange: 255, 201, 160;
    --abinb-yellow: 253, 253, 150;
    --abinb-bold-yellow: 255, 255, 0;
    --abinb-transition: transform .1s cubic-bezier(0.12, 0, 0.39, 0);
}
body {
    --abinb-text-color: var(--abinb-black);
    --abinb-page-background-color: var(--abinb-white);
    --abinb-link-color: var(--abinb-darkblue);
    --abinb-icon-color: var(--abinb-black);
    --abinb-hover-color: var(--abinb-lightgray);
    --abinb-toggle-color: var(--abinb-darkblue);
    --abinb-tab-focus-color: var(--abinb-lightorange);
    --abinb-sync-highlight-background-color: var(--abinb-yellow);
    --abinb-sync-highlight-color: var(--abinb-text-color);
    --abinb-search-highlight-background-color: var(--abinb-lightblue);
    --abinb-search-highlight-color: var(--abinb-text-color);
    --abinb-border-color: var(--abinb-darkgray);
    --abinb-sync-highlight-font-size: larger;
    
    transition: var(--transition);

}
body.abinb-dark {
    --abinb-text-color: var(--abinb-white);
    --abinb-page-background-color: var(--abinb-black);
    --abinb-link-color: var(--abinb-lightblue);
    --abinb-icon-color: var(--abinb-white);
    --abinb-hover-color: var(--abinb-darkgray);
    --abinb-toggle-color: var(--abinb-lightblue);
    --abinb-tab-focus-color: var(--abinb-white);
    --abinb-sync-highlight-background-color: var(--abinb-yellow);
    --abinb-sync-highlight-color: var(--abinb-page-background-color);
    --abinb-search-highlight-background-color: var(--abinb-page-background-color);
    --abinb-search-highlight-color: var(--abinb-lightblue);
    
}
@media (prefers-color-scheme: dark) {
    body { /* "dark mode" as preferred by the system */
        --abinb-text-color: var(--abinb-white);
        --abinb-page-background-color: var(--abinb-black);
        --abinb-link-color: var(--abinb-lightblue);
        --abinb-icon-color: var(--abinb-white);
        --abinb-hover-color: var(--abinb-darkgray);
        --abinb-toggle-color: var(--abinb-lightblue);
        --abinb-tab-focus-color: var(--abinb-white);
        --abinb-sync-highlight-background-color: var(--abinb-yellow);
        --abinb-sync-highlight-color: var(--abinb-page-background-color);
        --abinb-search-highlight-background-color: var(--abinb-page-background-color);
        --abinb-search-highlight-color: var(--abinb-lightblue);
    }
    /* the manual toggle can override the system theme */
    body.abinb-dark-pref-override {
        /* "light mode" */
        --abinb-text-color: var(--abinb-black);
        --abinb-page-background-color: var(--abinb-white);
        --abinb-link-color: var(--abinb-darkblue);
        --abinb-icon-color: var(--abinb-black);
        --abinb-hover-color: var(--abinb-lightgray);
        --abinb-toggle-color: var(--abinb-darkblue);
        --abinb-tab-focus-color: var(--abinb-lightorange);
        --abinb-sync-highlight-background-color: var(--abinb-yellow);
        --abinb-sync-highlight-color: var(--abinb-text-color);
        --abinb-search-highlight-background-color: var(--abinb-lightblue);
        --abinb-search-highlight-color: var(--abinb-text-color);
    }
}