:root {	
	/* COLOR SCHEME */
	/* light or dark depending on overall theme colors*/
	color-scheme: dark;
	
	/* color pallet: https://coolors.co/03040b-252628-5d646f-5c647a-7d87a1-babfc9 */
	
	/* PRIVATE COLOR LIST */
	--color-white:			#ffffff;
	--color-black:			#000000;
	--color-light-gold: 	#f9ea9a;
	
	/* in between colors. from darkest to lightest */
	--color-gray-5: 		hsl(0deg, 5%, 5%);
	--color-gray-10: 		hsl(0deg, 5%, 10%);
	--color-gray-14: 		hsl(0deg, 5%, 14%);
	--color-gray-16: 		hsl(0deg, 5%, 16%);
	--color-gray-18: 		hsl(0deg, 5%, 18%);
	--color-gray-20: 		hsl(0deg, 5%, 20%);
	--color-gray-25: 		hsl(0deg, 5%, 25%);
	--color-gray-30: 		hsl(0deg, 5%, 30%);
	--color-gray-35: 		hsl(0deg, 5%, 35%);
	--color-gray-40: 		hsl(0deg, 5%, 40%);
	--color-gray-45: 		hsl(0deg, 5%, 45%);
	--color-gray-50: 		hsl(0deg, 5%, 50%);
	--color-gray-55: 		hsl(0deg, 5%, 55%);
	--color-gray-60: 		hsl(0deg, 5%, 60%);
	--color-gray-65: 		hsl(0deg, 5%, 65%);
	--color-gray-70: 		hsl(0deg, 5%, 70%);
	--color-gray-75: 		hsl(0deg, 5%, 75%);
	--color-gray-80: 		hsl(0deg, 5%, 80%);
	--color-gray-85: 		hsl(0deg, 5%, 85%);
	--color-gray-90: 		hsl(0deg, 5%, 90%);
	--color-gray-95: 		hsl(0deg, 5%, 95%);
	
	/* 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-gray-14);	 		/* main color for backgrounds */
	--color-accent: var(--color-gray-70);			/* main color for accents such as buttons, links etc. */
	--color-accent--hover: var(--color-gray-55);
	
	/* MAIN TEXT COLORS */
	--color-text: var(--color-gray-65);				/* normal text on main background color */
	--color-text-accent: var(--color-gray-75);		/* text in <b>, <i>, <u> or <s> tags */
	--color-text-link: var(--color-accent);			/* text links */
	--color-text-link--hover: var(--color-accent--hover);
	--color-text-h1: var(--color-gray-60);		/* for header elements */
	--color-text-h2: var(--color-gray-45);
	--color-text-h3: var(--color-gray-60);
	--color-text-h4: var(--color-gray-60);
	
	
	/* 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-gray-95);
	
	
	/* GROUP COLORS */
	--color-gestaltwandler: #BC7272;
	--color-mensch: #896B9E;
	--color-mediale: #5F95B3;
	--color-admin: #AFA5A2;
	--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 */
	
	/* FORUM BACKGROUND */
	--color-forum-background: var(--color-gray-5);
	
	/* SCROLLBAR */
	--color-scrollbar-thumb: var(--color-gray-35);
	--color-scrollbar-track: var(--color-gray-20);
	
	body {
		--color-scrollbar-track: transparent;
	}
	
	/* TICON */
	--color-ticon-background: var(--color-gray-18);
	--color-ticon-border: var(--color-gray-40);
	--color-ticon-border--hover: var(--color-gray-60); /* only for clicable ticons */
	
	/* TIPSY TOOLTIP */
	--color-tooltip: var(--color-gray-10);
	--color-tooltip-background: var(--color-gray-70);
	
	/* BUTTONS */
	/* standard buttons have a border and transparent background */
	--color-button-standard-text: var(--color-accent);
	--color-button-standard-text--hover: var(--color-accent--hover);
	--color-button-standard-border: var(--color-accent);
	--color-button-standard-border--hover: var(--color-accent--hover);
	--color-button-standard-text--disabled: var(--color-gray-40);
	--color-button-standard-border--disabled: var(--color-gray-40);
	/* inverted buttons have a colored background and no border */
	--color-button-inverted-text: var(--color-accent);
	--color-button-inverted-text--hover: var(--color-white);
	--color-button-inverted-border: var(--color-accent);
	--color-button-inverted-border--hover: var(--color-gray-30);
	--color-button-inverted-background: transparent;
	--color-button-inverted-background--hover: var(--color-gray-40);
	--color-button-inverted-text--disabled: var(--color-gray-40);
	--color-button-inverted-border--disabled: var(--color-gray-40);
	--color-button-inverted-background--disabled: transparent;
	/* icon-button */
	--color-icon-button-text: var(--color-accent);
	--color-icon-button-text--hover: var(--color-white);
	--color-icon-button-background: var(--color-primary);
	--color-icon-button-background--hover: var(--color-gray-30);
	
	/* HEADER */
	--color-header-background: var(--color-gray-20);
	--color-header-button: var(--color-accent);
	--color-header-button--hover: var(--color-accent--hover);
	--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-gray-50);
	--color-forum-title-name-shadow: var(--color-gray-5);
	--color-forum-title-shortfacts: var(--color-text);
	
	/* FORUM INFO */
	--color-forum-info-box-border: var(--color-primary);
	--color-forum-info-box-background: var(--color-primary);
	--color-statistics-border-box-border: var(--color-gray-25);
	
	/* BREADCRUMB NAVIGATION */
	--color-breadcrumbs-background: transparent;
	--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); /* background behind individual forum. might wanna set to transparent if you already have a wrapper background */
	--color-forum-bit-border: 1px solid var(--color-primary); /* same */
	--color-forum-bit-name: var(--color-gray-60);
	--color-forum-bit-name--hover: var(--color-gray-50);
	--color-forum-bit-text-shadow: var(--color-gray-14);
	--color-forum-bit-name-background: var(--color-gray-18);
	--color-subforum-name: var(--color-gray-45);
	--color-subforum-name--hover: var(--color-gray-55);
	--color-forum-status-on: var(--color-gray-50);
	--color-forum-status-off: var(--color-gray-20);
	--color-forum-status-offclose: var(--color-gray-18);
	
	/* THREAD LIST */
	--color-threadlist-header-text: var(--color-text-accent);
	--color-threadlist-header-background: var(--color-gray-25);
	--color-threadlist-subheader-text: var(--color-text-accent);
	--color-threadlist-subheader-background: transparent;
	--color-threadlist-thread-selected-background: var(--color-gray-20);
	--color-threadlist-thread-deleted-background: color-mix(in srgb, var(--color-red), transparent 80%);
	
	/* POSTBIT */
	--color-post-background: var(--color-primary);
	--color-postbit-head-background: var(--color-gray-18);
	--color-postbit-head-player-name: var(--color-gray-40); /* gespielt von... */
	--color-postbit-head-usertitle: var(--color-text);
	--color-postbit-main-background: transparent;
	--color-postbit-footer-background: transparent;
	--color-postbit-border: var(--color-gray-20);
	--color-selected-post-background: var(--color-gray-20);
	--color-deleted-post-background: color-mix(in srgb, var(--color-red), transparent 80%);
	--color-unapproved-post-background: var(--color-gray-18);
	
	/* CHARACTER INFO POPUP */
	--color-character-info-popup-background: var(--color-primary);
	--color-character-info-popup-border: var(--color-primary);
	
	/* POST ELEMENTS */
	--color-post-algemein-title: var(--color-gray-55); 	  /* used for news posts */
	--color-post-algemein-border: var(--color-gray-18);   /* used for news posts */
	--color-post-citation-border: var(--color-accent);
	--color-codeblock-text: var(--color-text);
	--color-codeblock-text-php: var(--color-text);
	--color-codeblock-background: var(--color-gray-10);
	
	/* PANEL FOR NON-FORUM PAGES (e.g. proile, pns, informationen, regeln, listen...) */
	--color-panel-background: var(--color-primary);
	--color-panel-border: var(--color-primary);
	
	/* NAVIGATION MENUS (menus for listen, informationen, usercp and modcp )*/
	--color-navigation-menu-background: var(--color-primary);
	--color-navigation-menu-border: transparent;
	--color-navigation-menu-title: var(--color-text-accent);
	--color-navigation-menu-title-background: var(--color-gray-20);
	
	/* LISTEN */
	--color-list-title: var(--color-gray-45);
	--color-pairview-border: var(--color-gray-14);
	
	/* ACCORDION */
	--color-accordion-background: var(--color-primary);
	--color-accordion-border: var(--color-gray-25);
	
	/* PROFILE */
	--color-profile-header-background: linear-gradient(180deg, var(--color-gray-18) 75%, transparent);
	--color-character-title: var(--color-text);
	--color-character-scale-background: linear-gradient(to right, var(--color-gray-20), var(--color-gray-40));
	--color-character-scale-border: var(--color-primary);
	--color-character-scale-dot-background: var(--color-gray-18);
	--color-character-scale-dot-border: var(--color-gray-50);
	--color-character-fact-title: var(--color-gray-45);
	--color-inplaytracker-scene: transparent;
	--color-inplaytracker-scene--hover: var(--color-gray-20);
	--color-profile-footer-border: var(--color-gray-30);
	--color-tab-button-text: var(--color-text);
	--color-tab-button-text--active: var(--color-text-accent);
	--color-tab-button-background: var(--color-gray-20);
	--color-tab-button-background--active: var(--color-gray-25);
	
	/* MEMBERLIST */
	--color-memberlist-avatar-border: var(--color-gray-25);
	--color-memberlist-avatar-overlay: color-mix(in srgb, var(--color-gray-5), transparent 30%);
	--color-memberlist-user-info-text: var(--color-white);
	--color-memberlist-navigation-active-letter: var(--color-gray-80);
	
	/* WER IST WER */
	--color-whoiswho-card-background: var(--color-primary);
	--color-whoiswho-card-border: var(--color-gray-25);
	--color-whoiswho-player-name: var(--color-text);
	
	/* FOOTER */
	--color-footer-text: var(--color-gray-40);
	--color-footer-background: var(--color-gray-20);
	
	/* MODALS & POPUPS */
	--color-modal-background: var(--color-primary);
	--color-modal-text: var(--color-text);
	--color-modal-title-background: var(--color-gray-25);
	--color-modal-title-text: var(--color-text-accent);
	--color-modal-close-icon: var(--color-accent);
	--color-modal-close-icon-background: var(--color-primary);
	--color-modal-close-icon-border: var(--color-accent);
	--color-modal-close-icon--hover: var(--color-white);
	--color-modal-close-icon-background--hover: var(--color-gray-40);
	--color-modal-close-icon-border--hover: var(--color-gray-40);
	--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-text);
	--color-popup-menu-item-background: var(--color-gray-10);
	--color-popup-menu-item-text--hover: var(--color-white);
	--color-popup-menu-item-background--hover: var(--color-gray-40);
	/* jGrowl toasts */
	--color-jgrowl-text: var(--color-text-on-accent);
	--color-jgrowl-background: var(--color-gray-10);
	
	/* 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-white);
	--color-pagination-page-background--hover: var(--color-gray-30);
	--color-pagination-page-border--hover: var(--color-gray-40);
	--color-pagination-current-page-text: var(--color-text);
	--color-pagination-current-page-background: var(--color-primary);
	--color-pagination-current-page-border: var(--color-text);
	--color-pagination-button-text: var(--color-white);
	--color-pagination-button-background: var(--color-gray-40);
	--color-pagination-button-text--hover: var(--color-white);
	--color-pagination-button-background--hover: var(--color-gray-30);
	--color-pagination-popup-background: var(--color-gray-20);
	
	/* INPUT ELEMENTS */
	--color-input-text: var(--color-text);
	--color-input-icon: var(--color-accent);
	--color-input-background: var(--color-gray-14);
	--color-input-placeholder: var(--color-gray-45);
	--color-input-border: var(--color-gray-50);
	--color-input-border--hover: var(--color-gray-40);
	--color-checkbox-background: var(--color-gray-60);
	--color-radio-background: var(--color-gray-60);
	--color-input-border--disabled: var(--color-gray-40);
	--color-input-background--disabled: var(--color-gray-16);
	
	/* TABLES (for where tables actually make sense) */
	--color-table-header-text: var(--color-text-accent);
	--color-table-header-background: var(--color-gray-25);
	--color-table-row-selected: var(--color-gray-20);
	
	/* TIMELINE */
	--color-timeline-line: var(--color-gray-45);
	--color-timeline-dot-background: var(--color-primary);
	--color-timeline-dot-border: var(--color-gray-45);
	--color-timeline-entry-background: var(--color-gray-18);
	--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-text: currentColor;
	--color-highlight-background: var(--color-light-gold); /* marker effect on highlighted search terms */
}

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

::selection {
  background: var(--color-gray-80);
  color: var(--color-gray-10);
}