/* main global variables */
:root {
    /* resource assets */
    --fancybox-preloader-url: url(/public/images/fancybox_loading.gif);
    
    /* sizes */
    --space-tiny: 4px;
    --space-small: 8px;
    --space-medium: 12px;
    --space-standard: 16px;
    --space-decent: 24px;
    --space-large: 32px;
    --space-huge: 42px;
    --font-size: 15px;
    --btn-font-size: var(--font-size);
    --btn-border-radius-large: 3px;
    --btn-border-radius: 2px;
    --btn-border-radius-small: 2px;
    --tooltip-padding: 8px;
    --header-height: 48px;
    --txt2-layout-column-gap: var(--space-standard);
    --txt2-block-space: var(--space-standard);
    --image-preview-max-width: 160px;
    --image-gallery-max-height: 100px;
    --card-padding: var(--space-small);
}

/* global variables mapped from color schemes */
html {
    /* common */
    --background: var(---background);
    --body-background-main: var(---background);
    --body-background-logo: var(---body-background-logo);
    --text-color-light-max: var(---text-color-light-max);
    --text-color-dark-max: var(---text-color-dark-max);
    --text-color-max: var(---text-color-max);
    --text-color-max-inverse: var(---text-color-max-inverse);
    --text-color-light: var(---text-color-light-main);
    --text-color-dark: var(---text-color-dark-main);
    --text-color: var(---text-color-main);
    --text-color-inverse: var(---text-color-inverse);
    --main-background: var(---main-background);
    --backdrop-background-color: var(---backdrop-background-color);
    /* button */
    --btn-box-shadow: none;
    --btn-background-color: var(---btn-background-color);
    --btn-hover-background-color: var(---btn-hover-background-color);
    --btn-background-color-active: var(---btn-background-color-active);
    --btn-border-color: var(---btn-background-color);
    --btn-border-bottom-color: var(---btn-background-color);
    --btn-inverse-hover-background-color: var(---btn-inverse-hover-background-color);
    --btn-inverse-gradient-start: var(---btn-inverse-gradient-start);
    --btn-primary-active-background-color: var(---btn-primary-gradient-end);
    --btn-primary-background-color: var(---btn-primary-background-color);
    --btn-primary-hover-background-color: var(---btn-primary-hover-background-color);
    --btn-warning-border-color: var(---btn-warning-background-color);
    --btn-warning-background-color: var(---btn-warning-background-color);
    --btn-warning-hover-background-color: var(---btn-warning-gradient-start);
    --btn-warning-active-background-color: var(---btn-warning-gradient-end);
    --btn-danger-border-color: var(---btn-danger-background-color);
    --btn-danger-background-color: var(---btn-danger-background-color);
    --btn-danger-active-background-color: var(---btn-danger-gradient-end);
    --btn-danger-hover-background-color: var(---btn-danger-gradient-start);
    --btn-success-background-color: var(---btn-success-background-color);
    --btn-success-active-background-color: var(---btn-success-gradient-end);
    --btn-success-hover-background-color: var(---btn-success-gradient-start);
    --btn-info-background-color: var(---btn-info-background-color);
    --btn-info-active-background-color: var(---btn-info-gradient-end);
    --btn-info-hover-background-color: var(---btn-info-gradient-start);
    --btn-without-card-background-color: var(---btn-without-card-background-color);
    --btn-without-card-active-background-color: var(---btn-without-card-gradient-end);
    --btn-without-card-hover-background-color: var(---btn-without-card-gradient-start);
    --btn-disabled-background-color: var(---btn-disabled-background-color);
    /* uploader */
    --uploader-stripe-a: var(---uploader-stripe-a);
    --uploader-stripe-b: var(---uploader-stripe-b);
    /* progress */
    --progress-background-image: var(---progress-background-image);
    --progress-bar-background-color: var(---progress-bar-background-color);
    --progress-bar-background-image: var(---progress-bar-background-image);
    --progress-bar-success-background: var(---progress-bar-success-background);
    --progress-bar-success-box-shadow: inset 0px 0px 12px 0px var(---progress-bar-success-box-shadow);
    /* typography */
    --caption-color: var(---caption-color);
    --table-border-color: var(---table-border-color);
    --hr-border-color: var(---hr-border-color-lite);
    --menu_block-window-border-color: var(---hr-border-color-lite);
    --blockquote-color: var(---blockquote-color);
    --blockquote-background-color: var(---blockquote-background-color);
    --pre-background-color: var(---pre-background-color);
    --txt2-off-color: var(---txt2-off-color);
    --highlight-color: var(---highlight-color);
    --highlight-2-color: var(---highlight-2-color);
    --highlight-3-color: var(---highlight-3-color);
    /* code */
    --code-color: var(---code-color);
    --code-border-color: var(---code-border-color);
    --code-comment-color: var(---code-comment-color);
    --code-comment-doc-color: var(---code-comment-doc-color);
    --code-background-color: var(---code-background-color);
    --code-array-color: var(---code-array-color);
    --code-vartypes-color: var(---code-vartypes-color);
    --code-keyword-color: var(---code-keyword-color);
    --code-number-color: var(---code-number-color);
    --code-string-color: var(---code-string-color);
    /* thumbnail */
    --thumbnail-hover-box-shadow-color-1: var(---thumbnail-hover-box-shadow-color-1);
    --thumbnail-hover-box-shadow-color-2: var(---thumbnail-hover-box-shadow-color-2);
    /* label */
    --label-text-color: var(---text-color-max-inverse);
    --label-background: var(---label-background);
    --label-answered-bg-image: linear-gradient(to bottom, var(---btn-success-gradient-start), var(---btn-success-gradient-end));
    --label-not-answered-bg-image: linear-gradient(to bottom, var(---btn-warning-gradient-start), var(---btn-warning-gradient-end));
    --label-inverse-link-background-color: var(---label-inverse-link-background-color);
    --label-warning-link-background-color: var(---label-warning-link-background-color);
    /* form */
    --input-color-light-main: var(---input-color-light-main);
    --input-color-dark-main: var(---input-color-dark-main);
    --input-color-main: var(---input-color-main);
    --input-text-box-shadow-2-color: var(---input-text-box-shadow-2-color);
    --input-text-warning-box-shadow-2: var(---input-text-warning-box-shadow-2);
    --input-invalid-border-color: var(---btn-danger-gradient-start);
    --input-focus-border-color: var(---input-focus-border-color);
    --input-readonly-box-shadow-color: var(---input-readonly-box-shadow-color);
    /* tooltip */
    --tooltip-color: var(---tooltip-color);
    --tooltip-border-color: var(---tooltip-border-color);
    --tooltip-background-color: var(---background);
    /* dropdown */
    --dropdown-menu-border-color: var(---dropdown-menu-border-color);
    --dropdown-menu-divider-border-color: var(---label-inverse-link-background-color);
    /* abilities */
    --ability-border-color: var(---ability-border-color);
    --ability-title-color: var(---ability-title-color);
    --ability-available-box-shadow-color-1: var(---ability-available-box-shadow-color-1);
    --ability-available-box-shadow-color-2: var(---ability-available-box-shadow-color-2);
    --ability-available-box-shadow-color-3: var(---ability-available-box-shadow-color-3);
    --ability-button-learned-max-box-shadow-color: var(---ability-button-learned-max-box-shadow-color);
    --ability-button-border-top-color: var(---ability-button-border-top-color);
    --ability-button-border-bottom-color: var(---ability-button-border-bottom-color);
    --ability-button-open-border-color: var(---ability-button-open-border-color);
    --abilities-background-img: var(---abilities-background-url-main);
    /* achievment */
    --achievement-background-color: var(---achievement-background-color);
    --achievement-border-color: var(---achievement-border-color);
    --achievement-icon-background-color: var(---achievement-icon-background-color);
    --achievement-header-color-progress: var(---achievement-header-color-progress);
    --achievement-header-color-completed: var(---achievement-header-color-completed);
    --achievement-header-color-nothing: var(---achievement-header-color-nothing);
    --achievement-progress-bg: var(---achievement-progress-bg);
    --achievement-progress-bar-bg-progress: var(---achievement-progress-bar-bg-progress);
    --achievement-progress-bar-bg-completed: var(---achievement-progress-bar-bg-completed);
    /* url */
    --url-color: var(---url-color);
    --url-hover-color: var(---url-hover-color);
    --header-url-color: var(---header-url-color);
    /* grid */
    --grid-selector: var(---grid-selector);
    --grid-selector-inherited: var(---grid-selector-inherited);
    /* heading */
    --h1-bottom-gradient-color: var(---h1-bottom-gradient-color);
    --h1-bottom-gradient: linear-gradient(to right, transparent 0%, var(--h1-bottom-gradient-color) 50%, transparent 100%);
    /* scrolltop */
    --scrolltop-background-color: var(---scrolltop-background-color);
    /* perm */
    --perm-background: var(---perm-background);
    /* card */
    --card-head-background: var(---card-head-background);
    --card-border-color: var(---card-border-color);
    --card-body-background: var(---card-body-background);
    /* modal */
    --modal-body-background: var(---card-body-background);
    /* comment */
    --comment-menu-selected-background: linear-gradient(to left, var(---comment-selected), transparent);
    --comment-content-selected-border: var(---comment-selected);
    --comment-vote-active-color: var(---comment-vote-active-color);
    --comment-addon-color: var(---comment-addon-color);
    --comment-textarea-border-color: var(---comment-textarea-border-color);
    --vote-positive-color: var(---vote-positive-color);
    /* resource */
    --resource-head-date-color: var(---resource-head-date-color);
    --resource-head-link-hover-color: var(---resource-head-link-hover-color);
    /* uploader */
    --uploader-item-background: var(---uploader-item-background);
    /* poll */
    --poll-footer-color: var(---poll-footer-color);
    --poll-progress-border-color: var(---poll-progress-border-color);
    --poll-progress-fill-color: var(---poll-progress-fill-color);
    --poll-progress-background: var(---poll-progress-background);
    --poll-vote-highlight-color: var(---progress-bar-gradient-start);
    /* menu-block */
    --menu_block-head-inner-color: var(---menu_block-head-inner-color);
    /* firefly */
    --firefly-color: var(---firefly-color);
    --firefly-background: var(---card-body-background);
    --firefly-box-shadow: var(---firefly-box-shadow);
    /* gallery */
    --gallery-caption-background: var(---gallery-caption-background);
    --gallery-control-color: var(---gallery-control-color);
    /* footer */
    --footer-border-top: var(---footer-border-top);
    /* feed */
    --feed-new-background: var(---feed-new-background);
    --feed-row-inner-color: var(---feed-row-inner-color);
    /* constants */
    --info-constants-list-row-hover: var(---info-constants-list-row-hover);
    --info-constants-list-row-background: var(---info-constants-list-row-background);
    --info-constants-list-row-target-background: var(---info-constants-list-row-target-background);
    /* navbar (disabled for now) */
    --navbar-home-logo-img-url: var(---navbar-home-logo-img-url);
    --navbar-dropdown-open-background-color: var(---background);
    --navbar-link-active-box-shadow-color: var(---navbar-link-active-box-shadow-color);
    --nav-tabs-border-color: var(---background) var(---background) var(---nav-tabs-border-color);
    --navbar-link-active-background: var(---navbar-link-active-background);
    --navbar-home-logo-beta-color: var(---navbar-home-logo-beta-color);
    /* carousel */
    --carousel-caption-background: var(---carousel-caption-background);
    /* pikaday */
    --pika-single-background: var(---pika-single-background);
    --pika-button-color: var(---pika-button-color);
    --pika-button-background: var(---btn-background-color);
    --pika-is-startrange-background: var(---pika-is-startrange-background);
    --pika-is-inrange-background: var(---pika-is-inrange-background);
    --pika-has-event-box-shadow-color: var(---pika-has-event-box-shadow-color);
    --pika-has-event-background: var(---pika-has-event-background);
    --pika-is-today-color: var(---pika-is-today-color);
    --pika-is-selected-box-shadow-color: var(---pika-is-selected-box-shadow-color);
    /* monitor */
    --monitor-new-border-color: var(---monitor-new-border-color);
    --monitor-good-border-left-color: var(---achievement-header-color-completed);
    /* text */
    --text-primary-color: var(---text-primary-color);
    --text-primary-hover-color: var(---text-primary-hover-color);
    --text-warning-color: var(---text-warning-color);
    --text-warning-hover-color: var(---text-warning-hover-color);
    --text-success-color: var(---text-success-color);
    --text-success-hover-color: var(---text-success-hover-color);
    --text-error-color: var(---text-error-color);
    --text-error-hover-color: var(---text-error-hover-color);
    --text-info-color: var(---text-info-color);
    --text-info-hover-color: var(---text-info-hover-color);
    --text-muted-color-light-main: var(---text-muted-color-light-main);
    --text-muted-color-dark-main: var(---text-muted-color-dark-main);
    --text-muted-color: var(---text-muted-color);
    --text-muted-hover-color-light-main: var(---text-muted-hover-color-light-main);
    --text-muted-hover-color: var(---text-muted-hover-color);
    --text-new-color: var(---text-new-color);
    /* alert */
    --alert-color: var(---alert-color);
    --alert-border-color: var(---alert-border-color);
    --alert-background-color: var(---alert-background-color);
    --alert-success-color: var(---text-success-color);
    --alert-success-border-color: var(---alert-success-border-color);
    --alert-success-background-color: var(---alert-success-background-color);
    --alert-error-color: var(---alert-error-color);
    --alert-error-border-color: var(---alert-error-border-color);
    --alert-error-background-color: var(---alert-error-background-color);
    --alert-info-color: var(---alert-info-color);
    --alert-info-border-color: var(---alert-info-border-color);
    --alert-info-background-color: var(---alert-info-background-color);
    --alert-warning-color: var(---alert-warning-color);
    --alert-warning-border-color: var(---alert-warning-border-color);
    --alert-warning-background-color: var(---alert-warning-background-color);
    /* levelbar */
    --levelbar-border-color: var(---levelbar-border-color);
    --levelbar-background: var(---levelbar-background);
    --levelbar-rating-background: var(---levelbar-rating-background);
    --levelbar-rating-box-shadow: var(---levelbar-rating-box-shadow);
    --level-card-level: 0;
    --level-card-level-max: 60;
    --level-card-lightness1: var(---level-card-lightness1);
    --level-card-lightness2: var(---level-card-lightness2);
    --level-icon-font-color: var(---level-icon-font-color);
    --level-icon-border-color: var(---level-icon-border-color);
    --level-icon-cast-1-background: var(---level-icon-cast-1-background);
    --level-icon-cast-1-box-shadow-color: var(---level-icon-cast-1-box-shadow-color);
    --level-icon-cast-2-background: var(---level-icon-cast-2-background);
    --level-icon-cast-2-box-shadow-color: var(---level-icon-cast-2-box-shadow-color);
    --level-icon-cast-3-background: var(---level-icon-cast-3-background);
    --level-icon-cast-3-box-shadow-color: var(---level-icon-cast-3-box-shadow-color);
    --level-icon-cast-4-background: var(---level-icon-cast-4-background);
    --level-icon-cast-4-box-shadow-color: var(---level-icon-cast-4-box-shadow-color);
    --level-icon-cast-5-background: var(---level-icon-cast-5-background);
    --level-icon-cast-5-box-shadow-color: var(---level-icon-cast-5-box-shadow-color);
    /* userstatus */
    --userstatus-1-color: var(---userstatus-1-color);
    --userstatus-2-color: var(---userstatus-2-color);
    --userstatus-3-color: var(---userstatus-3-color);
    --userstatus-4-color: var(---userstatus-4-color);
    --userstatus-5-color: var(---userstatus-5-color);
    --userstatus-6-color: var(---userstatus-6-color);
    --userstatus-7-color: var(---userstatus-7-color);
    --userstatus-8-color: var(---userstatus-8-color);
    --userstatus-9-color: var(---userstatus-9-color);
    --userstatus-10-color: var(---userstatus-10-color);
    /* well */
    --well-border-color: var(---well-border-color);
    /* chat */
    --chat-message-channel-0-color: var(---chat-message-channel-0-color);
    --chat-message-channel-1-color: var(---chat-message-channel-1-color);
    --chat-message-channel-10-color: var(---chat-message-channel-10-color);
    --chat-message-channel-11-color: var(---chat-message-channel-11-color);
    --chat-message-channel-2-color: var(---chat-message-channel-2-color);
    --shoutbox-link-color: var(---background);
    --shoutbox_adminhelp-border-top-color: var(---shoutbox_adminhelp-border-top-color);
    /* qa */
    --qa-row-self-border-color: var(---qa-row-self-border-color);
    --qa-tabs-text-color: var(---qa-tabs-text-color);
    /* relation info */
    --relationinfo-border-color: var(---relationinfo-border-color);
    --relationinfo-background-color: var(---achievement-background-color);
    --relationinfo-team-border-color: var(---relationinfo-team-border-color);
    --relationinfo-team-background-color: var(---relationinfo-team-background-color);
    /* steam brand */
    --steam-brand-color: var(---steam-brand-color);
    --steam-brand-background: var(---steam-brand-background);
    --steam-brand-hover-background: var(---steam-brand-hover-background);
    /* other */
    --content-list-item-hover-background: var(---content-list-item-hover-background);
    /* image filters */
    --image-filter-invert-on-dark-mode: var(---image-filter-invert-on-dark-mode);
    --image-filter-invert-on-light-mode: var(---image-filter-invert-on-light-mode);
}