:root {
    --color-bg:              #ffffff;
    --color-text:            #000000;
    --color-border:          #cccccc;
    --color-border-light:    #eeeeee;

    --color-header-link:     #000000;
    --color-header-link-hover: #0000ff;

    --color-menu-bg:         #ffffff;
    --color-menu-link:       #000000;
    --color-menu-hover-bg:   #eeeeee;

    --color-counter-bg:      rgba(255, 255, 255, 0.8);

    --color-footer-text:     #454545;
    --color-footer-link:     #454545;
    --color-footer-text-outline: none;
    --color-footer-link-hover: #000000;

    --color-toon-bg:         #eeeeee;
    --color-toon-name:       #555555;

    --color-pager-link:      #555555;
    --color-pager-hover-bg:  #eeeeee;
    --color-pager-current-border: #888888;

    --color-btn-bg:          #dddddd;
    --color-btn-text:        #454545;
    --color-btn-hover-bg:    #cccccc;
    --color-btn-hover-text:  #000000;

    --color-button-bg-top:   #ffffff;
    --color-button-bg-bot:   #efefef;
    --color-button-bg:       #f6f6f6;
    --color-button-border:   #cccccc;
    --color-button-shadow:   #999999;

    --color-notify-bg:       #ffffed;

    --color-gray-text:       #454545;
    --color-muted:           #555555;

    --color-gray-bg:         #eeeeee;

    --color-pages-link:      #888888;
    --color-pages-link-bg:   #eeeeee;
    --color-pages-hover-bg:  #cccccc;
    --color-pages-current-bg:#ddffdd;

    --color-info-block-bg:   #eeeeee;

    --color-popup-bg:        #ffffff;
    --color-popup-close:     #cccccc;

    --color-input-border:    #cccccc;
    --color-input-shadow:    #dddddd;

    --color-hint-bg:         rgba(255, 200, 200, 0.8);
    --color-hint-border:     #cccccc;
    --color-hint-close:      #cc8888;

    --color-draft-bg:        #333333;
    --color-draft-text:      #ffffff;

    --color-cite:            #cccccc;
    --color-cite-hover:      #555555;

    --color-toggle-bg:       #eeeeee;
    --color-toggle-icon:     #333333;
    --complete-button-color: #a4cda7;
    --tip-bg: #ffffffdd;
    --foreign-name: #3333cc;
    --foreign-name-hover: #0000ff;
    --russian-nickname: #050;
    --background: url("/img/bg0.png");
    --logo: url("/img/retoonator.svg");
    --editor-bg-color: #cccccc;
    --grayb: #444444;
    --header-filter: none;
}
[data-theme="dark"] {
    --color-bg:              #1a1a1a;
    --color-text:            #e0e0e0;
    --color-border:          #444444;
    --color-border-light:    #333333;

    --color-header-link:     #e0e0e0;
    --color-header-link-hover: #7aadff;

    --color-menu-bg:         #2a2a2a;
    --color-menu-link:       #e0e0e0;
    --color-menu-hover-bg:   #3a3a3a;

    --color-counter-bg:      rgba(30, 30, 30, 0.85);

    --color-footer-text:     #ffffff;
    --color-footer-text-outline: #000000;
    --color-footer-link:     #ffffff;
    --color-footer-link-hover: #e0e0e0;

    --color-toon-bg:         #2a2a2a;
    --color-toon-name:       #aaaaaa;

    --color-pager-link:      #aaaaaa;
    --color-pager-hover-bg:  #3a3a3a;
    --color-pager-current-border: #666666;

    --color-btn-bg:          #3a3a3a;
    --color-btn-text:        #aaaaaa;
    --color-btn-hover-bg:    #4a4a4a;
    --color-btn-hover-text:  #e0e0e0;

    --color-button-bg-top:   #3a3a3a;
    --color-button-bg-bot:   #2a2a2a;
    --color-button-bg:       #333333;
    --color-button-border:   #555555;
    --color-button-shadow:   #111111;

    --color-notify-bg:       #2a2a1a;

    --color-gray-text:       #777777;
    --color-muted:           #aaaaaa;

    --color-gray-bg:         #2a2a2a;

    --color-pages-link:      #888888;
    --color-pages-link-bg:   #2a2a2a;
    --color-pages-hover-bg:  #3a3a3a;
    --color-pages-current-bg:#1a3a1a;

    --color-info-block-bg:   #2a2a2a;

    --color-popup-bg:        #252525;
    --color-popup-close:     #555555;

    --color-input-border:    #555555;
    --color-input-shadow:    #111111;

    --color-hint-bg:         rgba(80, 40, 40, 0.85);
    --color-hint-border:     #555555;
    --color-hint-close:      #885555;

    --color-draft-bg:        #111111;
    --color-draft-text:      #cccccc;

    --color-cite:            #555555;
    --color-cite-hover:      #aaaaaa;

    --color-toggle-bg:       #333333;
    --color-toggle-icon:     #e0e0e0;
    --complete-button-color: #2ea336;
    --foreign-name: #6464da;
    --foreign-name-hover: #8f8fe0;
    --tip-bg: #000000aa;
    --russian-nickname: rgb(0, 141, 0);
    --background: url("/img/bg1.png");
    --logo: url("/img/retoonator.svg");
    --editor-bg-color: #424242;
    --grayb: #cfcfcf;
    --header-filter: invert(1);
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
}

span {
    color: var(--color-text);
}

#header {
    border-bottom-color: var(--color-border);
}
#header a {
    color: var(--color-header-link);
}
#header a:hover {
    color: var(--color-header-link-hover);
}

#newmenu > li ul {
    background: var(--color-menu-bg);
    border-color: var(--color-border-light);
}
#newmenu li ul li a {
    color: var(--color-menu-link);
}
#newmenu li ul li a:hover {
    background: var(--color-menu-hover-bg);
}
#newmenu > li a .counter {
    background: var(--color-counter-bg);
}

#content {
    border-bottom-color: var(--color-border);
}

#footer {
    color: var(--color-footer-text);
}
#footer a {
    color: var(--color-footer-link);
}
#footer a:hover {
    color: var(--color-footer-link-hover);
}

.toon_preview {
    background-color: var(--color-toon-bg);
}
.toon_preview .toon_name a,
.toon_preview .toon_name_top a {
    color: var(--color-toon-name);
}

.draft {
    background: var(--color-draft-bg);
    color: var(--color-draft-text);
}
.draft .toon_name a,
.draft .toon_tagline,
.draft .toon_tagline a {
    color: var(--color-draft-text);
}

div.paginator ul li a {
    color: var(--color-pager-link);
}
div.paginator ul li a:hover,
div.paginator ul li.current a {
    background: var(--color-pager-hover-bg);
    color: var(--color-text);
}
div.paginator ul li.current a {
    border-color: var(--color-pager-current-border);
}

a.btn {
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
}
a.btn:hover {
    color: var(--color-btn-hover-text);
    background: var(--color-btn-hover-bg);
}

button {
    background: linear-gradient(to bottom, var(--color-button-bg-top), var(--color-button-bg-bot)) var(--color-button-bg);
    border-color: var(--color-button-border);
    color: var(--color-text);
}
button:hover,
button:focus {
    box-shadow: 0 0 3px var(--color-button-shadow);
    background: linear-gradient(to bottom, var(--color-button-bg-top), var(--color-button-bg-bot)) var(--color-button-bg);
    border-color: var(--color-button-shadow);
}

#notify_wrap {
    background: var(--color-notify-bg);
    border-color: var(--color-border);
}

.gray {
    background: var(--color-gray-bg);
}

.pages a {
    color: var(--color-pages-link);
    background: var(--color-pages-link-bg);
}
.pages a:hover {
    color: var(--color-text);
    background: var(--color-pages-hover-bg);
}
.pages span.current {
    background: var(--color-pages-current-bg);
}

img.avatar {
    border-color: var(--color-border);
}
img.p100 {
    border-color: var(--color-border);
}

.toon_comments .header,
.toon_comments .form {
    border-bottom-color: var(--color-border);
}
.toon_comments textarea,
#privmsg_form textarea {
    border-color: var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
}

.sn .info-block {
    background: var(--color-info-block-bg);
}

.sn .login-wrapper,
.sn .popup .wrapper {
    background: var(--color-popup-bg);
    border-color: var(--color-border);
}
.sn .login-wrapper .close,
.sn .popup .header .close {
    color: var(--color-popup-close);
}
.sn .login-wrapper h2,
.sn h2 {
    border-bottom-color: var(--color-border-light);
}
.sn h1 {
    border-bottom-color: var(--color-border-light);
}

.sn input.input,
.sn .captcha_show {
    border-color: var(--color-input-border);
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 0 2px var(--color-input-shadow) inset;
}
.sn .captcha_show input {
    border-top-color: var(--color-input-border);
    background: var(--color-bg);
    color: var(--color-text);
}

.sn .hint {
    background: var(--color-hint-bg);
    border-color: var(--color-hint-border);
}
.sn .hint .header .close {
    color: var(--color-hint-close);
}

a.cite {
    color: var(--color-cite);
}
a.cite:hover {
    color: var(--color-cite-hover);
}

.reg_variant li {
    border-color: var(--color-border-light);
}
.reg_variant li:hover,
.reg_variant li.active {
    background: var(--color-bg);
}
.reg_variant li.active {
    border-color: var(--color-border);
}

.levelup_comment {
    border-color: var(--color-text);
}

#toon_page h2 a {
    color: var(--color-muted);
}
#toon_page h2 a:hover {
    color: var(--color-header-link-hover);
}
#toon_page ul.continues_list li a {
    color: var(--color-text);
}
#toon_page .info .tags a {
    color: var(--color-gray-text);
}
#toon_page .info .tags a:hover {
    color: var(--color-text);
}
#toon_page .info .buttons a {
    color: var(--color-muted);
}
#toon_page .info .buttons a:hover,
#toon_page .info .buttons a.active {
    color: var(--color-text);
}
#toon_page .info .prize a {
    color: var(--color-text);
}

#theme-toggle {
    background: var(--color-toggle-bg);
    border: 1px solid var(--color-border);
    color: var(--color-toggle-icon);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transition: background 0.2s, border-color 0.2s;
}
#theme-toggle:hover {
    box-shadow: 0 0 3px var(--color-button-shadow);
    border-color: var(--color-button-shadow);
}

a[href] {
    color: var(--foreign-name);
}

a:hover[href] {
    color: var(--foreign-name-hover);
    text-decoration: none;
}