:root {
  --body-background-color: white;

  --text-color: hsl(0, 0%, 15%);
  --inverse-text-color: white;
  --muted-text-color: hsl(0, 0%, 55%);
  --header-color: hsl(0, 0%, 15%);

  --link-color: hsl(213, 100%, 50%);
  --link-hover-color: hsl(213, 100%, 75%);

  --error-background-color: hsl(0, 100%, 95%); /* light red */
  --success-background-color: hsl(120, 100%, 95%); /* light green */
  --warning-background-color: hsl(50, 100%, 93%); /* light yellow */
  --target-background: #FFC;

  --subnav-menu-background-color: #F5F5FF;

  --responsive-menu-background-color: var(--link-hover-color);
  --responsive-sidebar-submit-button-background-color: #EEE;
  --responsive-sidebar-submit-button-border: 1px solid rgb(197, 197, 197);

  --form-input-text-color: var(--text-color);
  --form-input-background: var(--body-background-color);
  --form-input-border: 1px solid #CCC;
  --form-input-placeholder-text-color: grey;
  --form-input-validation-error-border-color: red;
  --form-button-text-color: var(--form-input-text-color);
  --form-button-background: #EEE;
  --form-button-border: var(--form-input-border);
  --form-button-hover-background: #F5F5F5;
  --form-button-hover-box-shadow: 0 0 2px grey;
  --form-button-active-background: #DDD;
  --form-button-active-border: var(--form-button-border);
  --form-button-active-color: var(--form-button-text-color);

  --quick-search-form-background: var(--body-background-color);

  --user-upgrade-basic-background-color: #F5F5FF;
  --user-upgrade-gold-background-color: #FFF380;
  --user-upgrade-platinum-background-color: #EEE;
  --user-upgrade-button-text-color: white;
  --user-upgrade-button-background-color: var(--link-color);
  --user-upgrade-button-hover-background-color: hsl(213, 100%, 40%);

  --table-header-border: 2px solid #666;
  --table-row-border: 1px solid #CCC;
  --table-row-hover-background: hsl(213, 100%, 95%);
  --table-even-row-background: #FAFAFA;

  --preview-pending-color: #00F;
  --preview-flagged-color: #F00;
  --preview-deleted-color: black;
  --preview-has-children-color: #0F0;
  --preview-has-parent-color: #CC0;

  --preview-icon-color: white;
  --preview-icon-background: rgba(0, 0, 0, 0.5);

  --modqueue-tag-warning-color: var(--error-background-color);

  --uploads-dropzone-background: #EEE;
  --uploads-dropzone-progress-bar-foreground-color: var(--link-color);
  --uploads-dropzone-progress-bar-background-color: var(--link-hover-color);

  --forum-vote-up-color: green;
  --forum-vote-meh-color: goldenrod;
  --forum-vote-down-color: red;
  --forum-topic-status-new-color: hsla(0, 50%, 55%, 1);
  --forum-topic-status-pending-color: hsla(210, 25%, 55%, 1);
  --forum-topic-status-approved-color: hsla(120, 25%, 55%, 1);
  --forum-topic-status-rejected-color: hsla(0, 25%, 55%, 1);

  --moderation-report-text-color: red;
  --moderation-report-background-color: var(--error-background-color);

  --comment-sticky-background-color: var(--subnav-menu-background-color);

  --details-border: #DDD;

  --post-tooltip-background-color: var(--body-background-color);
  --post-tooltip-border-color: hsla(210, 100%, 3%, 0.15);
  --post-tooltip-box-shadow: 0 4px 14px -2px hsla(210, 100%, 3%, 0.10);
  --post-tooltip-header-background-color: var(--subnav-menu-background-color);
  --post-tooltip-info-color: #555;
  --post-tooltip-scrollbar-background: #999999;
  --post-tooltip-scrollbar-border: 0 none white;
  --post-tooltip-scrollbar-thumb-color: #AAAAAA;
  --post-tooltip-scrollbar-track-background: #EEEEEE;
  --post-tooltip-scrollbar-track-border: 0 none white;

  --user-tooltip-positive-feedback-color: orange;
  --user-tooltip-negative-feedback-color: red;

  --preview-current-post-background: rgba(0, 0, 0, 0.1);

  --autocomplete-selected-background-color: var(--subnav-menu-background-color);
  --autocomplete-border: 1px solid #CCC;
  --autocomplete-tag-autocorrect-underline: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAHElEQVQYV2NkQAL/GRj+M4IJBgY4zQhSABMEsQHMOAgCT5YN9gAAAABJRU5ErkJggg==);

  --diff-list-added-color: green;
  --diff-list-removed-color: red;
  --diff-list-obsolete-added-color: darkGreen;
  --diff-list-obsolete-removed-color: darkRed;

  --wiki-page-versions-diff-del-background: #FCC;
  --wiki-page-versions-diff-ins-background: #CFC;

  --post-notice-border: 1px solid #DDD;
  --post-parent-notice-background: var(--success-background-color);
  --post-child-notice-background: var(--warning-background-color);
  --post-pending-notice-background: #D8D8FC;
  --post-banned-notice-background: var(--error-background-color);
  --post-deleted-notice-background: var(--error-background-color);
  --post-resized-notice-background: #EED8FC;
  --post-search-notice-background: #EEE;

  --post-artist-commentary-container-background: #F8F8F8;
  --post-artist-commentary-container-border: 1px solid #CCC;

  --note-body-background: #FFE;
  --note-body-text-color: var(--text-color);
  --note-body-border: 1px solid black;
  --note-box-border: 1px solid black;
  --note-box-shadow: 0 0 0 1px white;
  --unsaved-note-box-border: 1px solid red;
  --movable-note-box-border: 1px solid green;
  --note-preview-border: 1px solid red;
  --note-preview-background: white;
  --note-highlight-color: blue;
  --note-tn-color: var(--muted-text-color);

  --series-pool-color: #A0A;
  --series-pool-hover-color: #B6B;

  --collection-pool-color: var(--general-tag-color);
  --collection-pool-hover-color: var(--general-tag-hover-color);

  --fetch-source-data-border: 1px solid #666;

  --post-mode-menu-edit-background: #5C5;
  --post-mode-menu-tag-script-background: #D6D;
  --post-mode-menu-add-fav-background: #FFA;
  --post-mode-menu-remove-fav-background: #FFA;
  --post-mode-menu-vote-up-background: #AFA;
  --post-mode-menu-vote-down-background: #FAA;
  --post-mode-menu-translation-background: #5CD;

  --tag-count-color: var(--muted-text-color);
  --low-post-count-color: red;

  --remove-favorite-button: deeppink;

  --ugoira-seek-slider-background: #EEE;
  --ugoira-seek-slider-progressbar-background: white;

  --keyboard-shortcut-color: white;
  --keyboard-shortcut-background-color: #333;

  --error-message-color: #A00;

  --bulk-update-request-approved-color: green;
  --bulk-update-request-failed-color: red;

  --login-link-color: #E00;
  --footer-border: 1px solid #DDD;
  --details-border: #DDD;

  --jquery-ui-widget-content-background: var(--body-background-color);
  --jquery-ui-widget-content-text-color: var(--text-color);
  --jquery-ui-dialog-box-shadow: 2px 2px 1px grey;

  --notice-error-background: var(--error-background-color);
  --notice-error-border: 1px solid #FBC7C6;
  --notice-info-background: var(--warning-background-color);
  --notice-info-border: 1px solid #CCC999;

  --dtext-blockquote-border-color: #999;
  --dtext-code-background: #EEE;
  --dtext-expand-border: 1px inset #666;
  --dtext-spoiler-background-color: black;
  --dtext-spoiler-hover-color: white;

  --wiki-page-other-name-background-color: #EEE;

  --paginator-ellipsis-color: grey;
  --paginator-arrow-background-color: white;
  --paginator-arrow-color: var(--link-color);

  --general-tag-color: var(--link-color);
  --general-tag-hover-color: var(--link-hover-color);
  --character-tag-color: #0A0;
  --character-tag-hover-color: #6B6;
  --copyright-tag-color: #A0A;
  --copyright-tag-hover-color: #B6B;
  --artist-tag-color: #A00;
  --artist-tag-hover-color: #B66;
  --meta-tag-color: #F80;
  --meta-tag-hover-color: #FA6;
  --selected-tag-color: white;

  --user-admin-color: red;
  --user-moderator-color: orange;
  --user-builder-color: #6633FF;
  --user-platinum-color: gray;
  --user-gold-color: #00F;
  --user-member-color: var(--link-color);
  --user-restricted-color: var(--link-color);
  --user-banned-color: black;

  --user-verified-email-color: #0A0;
  --user-unverified-email-color: #F80;

  --news-updates-background: #EEE;
  --news-updates-border: 2px solid #666;

  --related-tags-container-background: #EEE;
  --selected-related-tag-background-color: var(--link-color);
  --selected-related-tag-color: white;
}

/* variables that aren't defined in the dark theme fall back to the :root theme */
body[data-current-user-theme="dark"] {
  --grey-1:   #1f202c; /* hsluv(265, 15, 12.50); */
  --grey-2:   #2c2c3c; /* hsluv(265, 15, 18.75); */
  --grey-3:   #393a4d; /* hsluv(265, 15, 25.00); */
  --grey-4:   #9596a8; /* hsluv(265, 15, 62.50); */
  --grey-5:   #c9c9d2; /* hsluv(265, 15, 81.25); */
  --grey-6:   #e4e4e8; /* hsluv(265, 15, 90.625); */
  --red-0:    #652828; /* hsluv(12, 50, 25); */
  --red-3:    #af4a4b; /* hsluv(12, 50, 45); */
  --red-1:    #f07a7b; /* hsluv(12, 80, 65); */
  --red-2:    #f3a4a4; /* hsluv(12, 80, 75); */
  --yellow-0: #625121; /* hsluv(65, 80, 35); */
  --yellow-1: #e8c259; /* hsluv(65, 80, 80); */
  --yellow-2: #fae0a8; /* hsluv(65, 80, 90); */
  --green-0:  #164423; /* hsluv(135, 80, 25); */
  --green-3:  #2d7942; /* hsluv(135, 80, 45); */
  --green-1:  #46b265; /* hsluv(135, 80, 65); */
  --green-2:  #53d077; /* hsluv(135, 80, 75); */
  --aqua-0:   #293f3d; /* hsluv(180, 50, 25); */
  --aqua-1:   #4aada3; /* hsluv(180, 80, 65); */
  --aqua-2:   #57cabe; /* hsluv(180, 80, 75); */
  --blue-0:   #2c3d51; /* hsluv(245, 50, 25); */
  --blue-3:   #356ea1; /* hsluv(245, 80, 45); */
  --blue-1:   #51a3ec; /* hsluv(245, 80, 65); */
  --blue-2:   #8fbcf1; /* hsluv(245, 80, 75); */
  --indigo-0: #323573; /* hsluv(265, 50, 25); */
  --indigo-1: #9396ec; /* hsluv(265, 80, 65); */
  --indigo-2: #b2b4f1; /* hsluv(265, 80, 75); */
  --purple-0: #473067; /* hsluv(280, 50, 25); */
  --purple-1: #b38bec; /* hsluv(280, 80, 65); */
  --purple-2: #c7adf1; /* hsluv(280, 80, 75); */

  /* main background colors */
  --body-background-color: var(--grey-1);

  --error-background-color: var(--red-0);
  --success-background-color: var(--green-0);
  --warning-background-color: var(--yellow-0);

  --subnav-menu-background-color: var(--grey-2);
  --responsive-menu-background-color: var(--grey-3);
  --footer-border: 1px solid var(--grey-3);
  --details-border: var(--grey-3);

  --table-header-border: 2px solid var(--grey-3);
  --table-even-row-background: var(--grey-2);
  --table-row-hover-background: var(--grey-3);
  --table-row-border: 1px solid var(--grey-3);

  /* main text colors */
  --text-color: var(--grey-5);
  --inverse-text-color: white;
  --muted-text-color: var(--grey-4);
  --header-color: var(--grey-6);

  --link-color: var(--blue-1);
  --link-hover-color: var(--blue-2);

  --artist-tag-color: var(--red-1);
  --artist-tag-hover-color: var(--red-2);
  --copyright-tag-color: var(--purple-1);
  --copyright-tag-hover-color: var(--purple-2);
  --character-tag-color: var(--green-1);
  --character-tag-hover-color: var(--green-2);
  --general-tag-color: var(--blue-1);
  --general-tag-hover-color: var(--blue-2);
  --meta-tag-color: var(--yellow-1);
  --meta-tag-hover-color: var(--yellow-2);

  --series-pool-color: var(--copyright-tag-color);
  --series-pool-hover-color: var(--copyright-tag-hover-color);
  --collection-pool-color: var(--general-tag-color);
  --collection-pool-hover-color: var(--general-tag-hover-color);

  --user-banned-color: var(--grey-1);
  --user-restricted-color: var(--blue-1);
  --user-member-color: var(--blue-1);
  --user-gold-color: var(--yellow-1);
  --user-platinum-color: var(--grey-4);
  --user-builder-color: var(--purple-1);
  --user-moderator-color: var(--green-1);
  --user-admin-color: var(--red-1);

  --user-verified-email-color: var(--green-1);
  --user-unverified-email-color: var(--yellow-1);

  /* misc specific colors */
  --autocomplete-selected-background-color: var(--grey-3);
  --autocomplete-border: 1px solid var(--grey-4);

  --bulk-update-request-approved-color: var(--green-1);
  --bulk-update-request-failed-color: var(--red-1);

  --comment-sticky-background-color: var(--blue-0);

  --diff-list-added-color: var(--green-1);
  --diff-list-removed-color: var(--red-1);
  --diff-list-obsolete-added-color: var(--green-3);
  --diff-list-obsolete-removed-color: var(--red-3);

  --dtext-blockquote-border-color: var(--grey-4);
  --dtext-code-background: var(--grey-2);
  --dtext-expand-border: 1px inset var(--grey-4);
  --dtext-spoiler-background-color: black;
  --dtext-spoiler-hover-color: var(--text-color);

  --form-input-text-color: var(--grey-5);
  --form-input-background: var(--grey-3);
  --form-input-border: 1px solid var(--grey-4);
  --form-input-placeholder-text-color: var(--grey-4);
  --form-input-validation-error-border-color: var(--red-1);
  --form-button-text-color: var(--grey-1);
  --form-button-background: var(--grey-5);
  --form-button-border: 1px solid var(--grey-4);
  --form-button-hover-background: white;
  --form-button-hover-box-shadow: 0 0 2px var(--grey-5);
  --form-button-active-background: var(--grey-5);
  --form-button-active-border: 1px solid var(--grey-5);
  --form-button-active-color: white;

  --forum-vote-up-color: var(--green-1);
  --forum-vote-meh-color: var(--yellow-1);
  --forum-vote-down-color: var(--red-1);
  --forum-topic-status-new-color: var(--red-3);
  --forum-topic-status-pending-color: var(--blue-3);
  --forum-topic-status-approved-color: var(--green-3);
  --forum-topic-status-rejected-color: var(--red-3);

  --moderation-report-text-color: var(--red-1);
  --moderation-report-background-color: var(--red-0);

  --jquery-ui-widget-content-text-color: var(--text-color);
  --jquery-ui-widget-content-background: var(--grey-2);
  --jquery-ui-dialog-box-shadow: 0 0 8px var(--grey-1);

  --keyboard-shortcut-color: var(--grey-1);
  --keyboard-shortcut-background-color: var(--grey-5);

  --modqueue-tag-warning-color: var(--error-background-color);

  --news-updates-background: var(--grey-3);
  --news-updates-border: 2px solid var(--grey-4);

  --note-body-text-color: var(--grey-1);
  --unsaved-note-box-border: 1px solid var(--red-1);
  --movable-note-box-border: 1px solid var(--green-1);
  --note-preview-border: 1px solid var(--red-1);
  --note-highlight-color: var(--blue-1);

  --notice-error-background: var(--red-0);
  --notice-error-border: 1px solid var(--grey-4);
  --notice-info-background: var(--blue-0);
  --notice-info-border: 1px solid var(--blue-1);

  --paginator-arrow-background-color: white;
  --paginator-arrow-color: var(--link-color);
  --paginator-ellipsis-color: var(--grey-4);

  --post-artist-commentary-container-background: var(--grey-3);
  --post-artist-commentary-container-border: 1px solid var(--grey-3);

  --post-mode-menu-edit-background: var(--green-0);
  --post-mode-menu-tag-script-background: var(--indigo-0);
  --post-mode-menu-add-fav-background: var(--yellow-0);
  --post-mode-menu-remove-fav-background: var(--yellow-0);
  --post-mode-menu-vote-up-background: var(--red-0);
  --post-mode-menu-vote-down-background: var(--red-0);
  --post-mode-menu-translation-background: var(--blue-0);

  --post-notice-border: 1px solid var(--grey-3);
  --post-search-notice-background: var(--grey-3);
  --post-child-notice-background: var(--yellow-0);
  --post-parent-notice-background: var(--green-0);
  --post-resized-notice-background: var(--purple-0);
  --post-pending-notice-background: var(--indigo-0);
  --post-deleted-notice-background: var(--red-0);
  --post-banned-notice-background: var(--red-0);

  --post-tooltip-background-color: var(--grey-3);
  --post-tooltip-border-color: var(--grey-4);
  --post-tooltip-header-background-color: var(--grey-3);
  --post-tooltip-info-color: var(--grey-5);
  --post-tooltip-scrollbar-background: var(--grey-4);
  --post-tooltip-scrollbar-border: none;
  --post-tooltip-scrollbar-thumb-color: var(--grey-5);
  --post-tooltip-scrollbar-track-background: var(--grey-1);
  --post-tooltip-scrollbar-track-border: none;

  --user-tooltip-positive-feedback-color: var(--yellow-1);
  --user-tooltip-negative-feedback-color: var(--red-1);

  --preview-pending-color: var(--blue-1);
  --preview-flagged-color: var(--red-1);
  --preview-deleted-color: var(--grey-5);
  --preview-has-children-color: var(--green-1);
  --preview-has-parent-color: var(--yellow-1);

  --related-tags-container-background: var(--grey-3);
  --selected-related-tag-background-color: var(--link-color);
  --selected-related-tag-color: white;

  --target-background: var(--blue-0);

  --uploads-dropzone-background: var(--grey-3);
  --uploads-dropzone-progress-bar-foreground-color: var(--link-color);
  --uploads-dropzone-progress-bar-background-color: var(--link-hover-color);

  --user-upgrade-basic-background-color: var(--grey-2);
  --user-upgrade-gold-background-color: var(--indigo-0);
  --user-upgrade-platinum-background-color: var(--blue-0);
  --user-upgrade-button-text-color: white;
  --user-upgrade-button-background-color: var(--link-color);
  --user-upgrade-button-hover-background-color: var(--link-hover-color);

  --wiki-page-other-name-background-color: var(--grey-3);
  --wiki-page-versions-diff-del-background: var(--red-0);
  --wiki-page-versions-diff-ins-background: var(--green-0);

  --low-post-count-color: var(--red-1);
  --login-link-color: var(--red-1);
  --remove-favorite-button: var(--red-1);
  --fetch-source-data-border: 1px solid var(--grey-4);
  --quick-search-form-background: var(--grey-1);
}
