:root {	
	/* COLOR SCHEME */
	/* light or dark depending on overall theme colors*/
	color-scheme: light;
	
	/* color pallet: https://coolors.co/eaebe6-666666-3c7474-d57d03-f9ea9a */
	
	/* PRIVATE COLOR LIST */
	/* add or delete colors as needed for your theme */
	--color-white:		#ffffff;
	--color-black:		#000000;
	--color-gray:		#666666;
	--color-off-white:	#eaebe6;
	--color-pine-blue:	#3C7474;
	--color-amber-earth:#d57d03;
	--color-light-gold: #f9ea9a;
	
	/* board alert colors */
	--color-red: 		#9c0000;
	--color-blue: 		#002b48;
	--color-green: 		#144800;
	--color-yellow: 	#ffd808;
	--color-success:	#1c961c;
	--color-error:		#bc1919;
	
	/* MAIN COLORS */
	/* adjust these to change the overall color scheme of the theme */
	--color-primary: var(--color-off-white); 		/* main color for backgrounds */
	--color-secondary: var(--color-gray);			/* main color for text and ui */
	--color-accent: var(--color-pine-blue);			/* main color for accents such as buttons, links etc. */
	
	/* GRADATION COLORS */
	/* generates different shades of given color */
	/* add more if needed, but keep primary, secondary and accent color gradations */
	/* mix whith white for dark colors or black/dark or transparent values for light colors */
	--color-primary-100: color-mix(in srgb, var(--color-primary), transparent 0%);
	--color-primary-80:  color-mix(in srgb, var(--color-primary), transparent 20%);
	--color-primary-60:  color-mix(in srgb, var(--color-primary), transparent 40%);
	--color-primary-40:  color-mix(in srgb, var(--color-primary), transparent 60%);
	--color-primary-20:  color-mix(in srgb, var(--color-primary), transparent 80%);
	
	--color-secondary-100: color-mix(in srgb, var(--color-secondary), white 0%);
	--color-secondary-80:  color-mix(in srgb, var(--color-secondary), white 20%);
	--color-secondary-60:  color-mix(in srgb, var(--color-secondary), white 40%);
	--color-secondary-40:  color-mix(in srgb, var(--color-secondary), white 60%);
	--color-secondary-20:  color-mix(in srgb, var(--color-secondary), white 80%);
	
	--color-accent-100: color-mix(in srgb, var(--color-accent), white 0%);
	--color-accent-80:  color-mix(in srgb, var(--color-accent), white 20%);
	--color-accent-60:  color-mix(in srgb, var(--color-accent), white 40%);
	--color-accent-40:  color-mix(in srgb, var(--color-accent), white 60%);
	--color-accent-20:  color-mix(in srgb, var(--color-accent), white 80%);
	
	/* MAIN TEXT COLORS */
	--color-text: var(--color-gray);				/* normal text on main background color */
	--color-text-accent: var(--color-amber-earth);	/* text in <b>, <i>, <u> or <s> tags */
	--color-text-link: var(--color-accent);			/* text links */
	--color-text-link--hover: var(--color-accent-80);
	--color-text-h1: var(--color-amber-earth);	/* for header elements */
	--color-text-h2: var(--color-gray);
	--color-text-h3: var(--color-amber-earth);
	--color-text-h4: var(--color-amber-earth);
	
	
	/* define a textcolor that is readable on --color-accent (NOTE: not --color-text-accent!). on light accent colors, this should be a dark value*/
	--color-text-on-accent: var(--color-white);
	
	
	/* GROUP COLORS */
	--color-gestaltwandler: #846262;
	--color-mensch: #6e6284;
	--color-mediale: #627384;
	--color-admin: #797979;
	--color-bewerber: var(--color-text);
	--color-eiszeit: var(--color-text);
	
	
	/* INDIVIDUAL COLORS IN THEME */
	/* to set individual colors, set the variable corresponding to the element you wish to adjust */
	/* didn't find the element you where looking for? ask arby */
	
	/* SCROLLBAR */
	--color-scrollbar-thumb: var(--color-accent-60);
	--color-scrollbar-track: transparent;
	
	/* TICON */
	--color-ticon-background: var(--color-primary);
	--color-ticon-border: var(--color-secondary);
	--color-ticon-border--hover: var(--color-accent); /* only for clicable ticons */
	
	/* TIPSY TOOLTIP */
	--color-tooltip: var(--color-text-on-accent);
	--color-tooltip-background: var(--color-accent);
	
	/* BUTTONS */
	/* standard buttons have a border and transparent background */
	--color-button-standard-text: var(--color-text);
	--color-button-standard-text--hover: var(--color-accent);
	--color-button-standard-border: var(--color-text);
	--color-button-standard-border--hover: var(--color-accent);
	--color-button-standard-text--disabled: var(--color-secondary-60);
	--color-button-standard-border--disabled: var(--color-secondary-60);
	/* inverted buttons have a colored background and no border */
	--color-button-inverted-text: var(--color-text-on-accent);
	--color-button-inverted-text--hover: var(--color-text-on-accent);
	--color-button-inverted-background: var(--color-accent);
	--color-button-inverted-background--hover: var(--color-accent-80);
	--color-button-inverted-text--disabled: var(--color-text-on-accent);
	--color-button-inverted-background--disabled: var(--color-accent-60);
	
	/* HEADER */
	--color-header-background: var(--color-primary);
	--color-header-button: var(--color-text);
	--color-header-button--hover: var(--color-accent);
	--color-header-button-background: transparent;
	--color-header-button-background--hover: transparent;
	
	/* ACCOUNTSWITCHER */
	--account-switcher-header-background: var(--color-primary);
	
	/* FORUM TITLE */
	--color-forum-title-name: var(--color-secondary-80);
	--color-forum-title-shortfacts: var(--color-secondary);
	--color-forum-title-mobile-background: var(--color-primary-80);
	
	/* FORUM INFO */
	--color-forum-info-box-border: var(--color-white);
	--color-forum-info-box-background: var(--color-primary-80);
	/* defines the colors of the sidebar buttons */
	--color-info-links-gradient-start: var(--color-accent);
	--color-info-links-gradient-end: var(--color-text-accent);
	
	/* BREADCRUMB NAVIGATION */
	--color-breadcrumbs-background: var(--color-primary-60);
	--color-breadcrumbs-border: transparent;
	
	/* FORUM BIT */
	--color-forum-wrapper-background: transparent; /* color behind all forums. set transparent if you want gaps between the individual forums */
	--color-forum-wrapper-border: none; /* same */
	--color-forum-bit-background: var(--color-primary-80); /* background behind individual forum. might wanna set to transparent if you already have a wrapper background */
	--color-forum-bit-border: 1px solid var(--color-white); /* same */
	--color-forum-bit-name: var(--color-text);
	--color-forum-bit-name--hover: var(--color-secondary-80);
	--color-subforum-name: var(--color-accent);
	
	/* THREAD LIST */
	--color-threadlist-header-text: var(--color-text-on-accent);
	--color-threadlist-header-background: var(--color-accent);
	--color-threadlist-subheader-text: var(--color-accent);
	--color-threadlist-subheader-background: transparent;
	--color-threadlist-thread-selected-background: var(--color-accent-20);
	--color-threadlist-thread-deleted-background: color-mix(in srgb, var(--color-red), transparent 80%);
	
	/* POSTBIT */
	--color-post-background: var(--color-primary-80);
	--color-postbit-head-background: var(--color-secondary-20);
	--color-postbit-head-player-name: var(--color-secondary-80); /* gespielt von... */
	--color-postbit-head-usertitle: var(--color-text);
	--color-postbit-main-background: transparent;
	--color-postbit-footer-background: transparent;
	--color-postbit-border: var(--color-white);
	--color-selected-post-background: var(--color-accent-20);
	--color-deleted-post-background: color-mix(in srgb, var(--color-red), transparent 80%);
	--color-unapproved-post-background: var(--color-secondary-20);
	
	/* CHARACTER INFO POPUP */
	--color-character-info-popup-background: var(--color-primary);
	--color-character-info-popup-border: var(--color-secondary);
	
	/* POST ELEMENTS */
	--color-post-algemein-title: var(--color-accent); 	  /* used for news posts */
	--color-post-algemein-border: var(--color-accent-40); /* used for news posts */
	--color-post-citation-border: var(--color-accent);
	--color-codeblock-text: var(--color-text);
	--color-codeblock-background: var(--color-white);
	
	/* PANEL FOR NON-FORUM PAGES (e.g. proile, pns, informationen, regeln, listen...) */
	--color-panel-background: var(--color-primary-80);
	--color-panel-border: var(--color-white);
	
	/* NAVIGATION MENUS (menus for listen, informationen, usercp and modcp )*/
	--color-navigation-menu-background: var(--color-primary);
	--color-navigation-menu-border: var(--color-accent);
	--color-navigation-menu-title: var(--color-text-on-accent);
	--color-navigation-menu-title-background: var(--color-accent);
	
	/* LISTEN */
	--color-list-title: var(--color-text-accent);
	
	/* ACCORDION */
	--color-accordion-background: var(--color-primary-80);
	--color-accordion-border: var(--color-white);
	
	/* PROFILE */
	--color-profile-header-background: linear-gradient(180deg, var(--color-primary-80) 75%, transparent);
	--color-character-title: var(--color-text);
	--color-character-scale-background: linear-gradient(to right, var(--color-accent), var(--color-text-accent));
	--color-character-scale-border: var(--color-primary);
	--color-character-scale-dot-background: var(--color-primary);
	--color-character-scale-dot-border: var(--color-accent);
	--color-character-fact-title: var(--color-accent);
	--color-inplaytracker-scene: var(--color-primary-40);
	--color-inplaytracker-scene--hover: var(--color-primary-60);
	--color-profile-footer-border: var(--color-accent);
	
	/* MEMBERLIST */
	--color-memberlist-avatar-border: var(--color-white);
	--color-memberlist-avatar-overlay: color-mix(in srgb, var(--color-black), transparent 30%);
	--color-memberlist-user-info-text: var(--color-white);
	--color-memberlist-navigation-active-letter: var(--color-text-accent);
	
	/* WER IST WER */
	--color-whoiswho-card-background: var(--color-primary);
	--color-whoiswho-card-border: var(--color-white);
	--color-whoiswho-player-name: var(--color-accent);
	
	/* FOOTER */
	--color-footer-text: var(--color-secondary-60);
	--color-footer-background: var(--color-primary);
	
	/* MODALS & POPUPS */
	--color-modal-background: var(--color-white);
	--color-modal-text: var(--color-text);
	--color-modal-title-background: var(--color-accent);
	--color-modal-title-text: var(--color-text-on-accent);
	--color-modal-close-icon: var(--color-text);
	--color-modal-close-icon-background: var(--color-primary);
	--color-modal-close-icon-border: var(--color-text);
	--color-modal-close-icon--hover: var(--color-accent);
	--color-modal-close-icon-background--hover: var(--color-primary);
	--color-modal-close-icon-border--hover: var(--color-accent);
	--color-modal-backdrop: rgba(0, 0, 0, 0.75);
	/* popup-menus are small context menus e.g. for selecting a post author */
	--color-popup-menu-item-text: var(--color-accent);
	--color-popup-menu-item-background: var(--color-white);
	--color-popup-menu-item-text--hover: var(--color-text-on-accent);
	--color-popup-menu-item-background--hover: var(--color-accent);
	/* jGrowl toasts */
	--color-jgrowl-text: var(--color-text-on-accent);
	--color-jgrowl-background: var(--color-accent);
	
	/* PAGINATION */
	--color-pagination-page-text: var(--color-text);
	--color-pagination-page-background: var(--color-primary);
	--color-pagination-page-border: transparent;
	--color-pagination-page-text--hover: var(--color-text-on-accent);
	--color-pagination-page-background--hover: var(--color-accent-80);
	--color-pagination-page-border--hover: var(--color-accent);
	--color-pagination-current-page-text: var(--color-accent);
	--color-pagination-current-page-background: var(--color-primary);
	--color-pagination-current-page-border: var(--color-accent);
	--color-pagination-button-text: var(--color-text-on-accent);
	--color-pagination-button-background: var(--color-accent);
	--color-pagination-button-text--hover: var(--color-text-on-accent);
	--color-pagination-button-background--hover: var(--color-accent-80);
	--color-pagination-popup-background: var(--color-primary);
	
	/* INPUT ELEMENTS */
	--color-input-text: var(--color-text);
	--color-input-icon: var(--color-accent);
	--color-input-background: var(--color-primary-60);
	--color-input-placeholder: var(--color-secondary-80);
	--color-input-border: var(--color-secondary);
	--color-input-border--hover: var(--color-accent);
	--color-checkbox-background: var(--color-accent-40);
	--color-radio-background: var(--color-accent);
	--color-input-border--disabled: var(--color-secondary-60);
	--color-input-background--disabled: var(--color-secondary-20);
	
	/* TABLES (for where tables actually make sense) */
	--color-table-header-text: var(--color-text-on-accent);
	--color-table-header-background: var(--color-accent);
	--color-table-row-selected: var(--color-accent-20);
	
	/* TIMELINE */
	--color-timeline-line: var(--color-secondary-60);
	--color-timeline-dot-background: var(--color-primary);
	--color-timeline-dot-border: var(--color-secondary-60);
	--color-timeline-entry-background: var(--color-secondary-20);
	--color-timeline-entry-text: var(--color-text);
	
	/* SHADOWS */
	--box-shadow-light: -1px 1px 0.5rem 0 #00000033;
	--box-shadow-medium: 0 1px 0.75rem 0 #00000066;
	--box-shadow-strong: 0 0 0.75rem 0 var(--color-black);
	--box-shadow-inverted: 0 0 0.75rem 0 #ffffffaa;
	
	/* MISC */
	--color-highlight-background: var(--color-light-gold); /* marker effect on highlighted search terms */
}

* {
	scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}