:root {
    --bg: #f8f8f8;
    --fg: #111;

    --tab-background: #4448;
    --visible-tab: #666;
    --tab-scrollbar: #18d;

    --mode-normal-fg: #333;
    --mode-command-fg: #f54;
    --mode-follow-fg: #f7a;
    --mode-insert-fg: #3c2;
    --mode-explore-fg: #0cc;
    --mode-search-fg: #fb0;
    --mode-pointer-fg: #3af;
    --mode-pointer-bg: none;
    --mode-visual-fg: #b4f;
    --mode-visual-bg: none;

    --suggestions-border: #eee;
    --suggestions-bg: #ddd;
    --suggestions-selected: #fff;
    --suggestions-url: #08f;
    --suggestions-file: #f80;
    --notification-border: #aaa;
    --notification-date: #777;
    --notification-permission: #777;
    --notification-error: #f33;
    --notification-warning: #f80;
    --notification-info: #08f;
    --notification-success: #0c0;

    /* special pages */
    --link-color: #08f;
    --scrollbar-bg: #fff;
    --scrollbar-thumb: #ddd;
    --button-disabled: #777;
    --code-fg: #000;
    --code-bg: #fff;
    --special-page-element-bg: #eee;
    --special-page-element-border: #aaa;
    --input-unfocused: #aaa;
    --input-focused: #666;
    --download-progress-fg: #fff;
    --download-progress-bg: #eee;
    --helppage-h1: #a00;
    --helppage-h2: #c43;
    --helppage-h3: #b75;
    --code-command: #c55;
    --helppage-countable: #0c0;
}

/* general */
#tabs .status {filter: invert(.4);}

/* special pages */
#pointer, #cookiespage img, #downloadspage img, #historypage img {filter: invert(1);}
#historypage img.favicon {filter: none;}

[current-mode=normal] { --mode-fg: var(--mode-normal-fg); }
[current-mode=command] { --mode-fg: var(--mode-command-fg); }
[current-mode=insert] { --mode-fg: var(--mode-insert-fg); }
[current-mode=follow] { --mode-fg: var(--mode-follow-fg); }
[current-mode=explore] { --mode-fg: var(--mode-explore-fg); }
[current-mode=search] { --mode-fg: var(--mode-search-fg); }
[current-mode=pointer] { --mode-fg: var(--mode-pointer-fg); }
[current-mode=visual] { --mode-fg: var(--mode-visual-fg); }

#url { background: #fffc; }

#navbar, #tabs { background: #333; }
#tabs > span { color: #eee; }

body { --mode-theme-bg: var(--mode-fg); }
body[current-mode=normal] { --mode-theme-bg: #333; }
#navbar, #tabs { background: var(--mode-theme-bg); }

body #mode { color: #111; }
body[current-mode=normal] #mode { color: #eee; }
[current-mode=normal] #url { background: #333; color: #eee; }

#mode { text-transform: none; font-size: 110%; }

/* No idea how to undo this. */
::-webkit-scrollbar {width: 1em;}

#mode-suggestions { display: none; }

#pointer { animation: none; background: #0ff7; }