/* **********************************************
	NOTICES:
	!!! This file should always be loaded second to last and have the second highest number in stylesheet ordering!
	1. hexcodes only (unless you want to play with others but i suggest hex lol)
	    opacity table: https://davidwalsh.name/hex-opacity
	2. banner suggested width min 1500px with a ratio of 2:1 or 3:1
********************************************** */

/* DARK MODE */
:root {
    --banner-image: url('/wcc_assets/themes/The Vivarium/sonia4kres_dark.png');
    --banner-image-no-subject: url('/wcc_assets/themes/The Vivarium/sonia4kres_dark_nosubject.png'); /* basically mimics banner but no subject for pattern purposes */
	--banner-image-position: center center;
	--texture-image: url(https://www.transparenttextures.com/patterns/asfalt-dark.png);
	--banner-sname-color: #faf5f1;
	--banner-sname-hov-color: #A35154;
	--banner-sname-shadow-color: #060817;
	
	--base-bg-color: #151821;
	--base-bg-color-body-overlay: #151821F2; /* change only before F2 */
	--base-bg-color-faded: #151821D9; /* change only before D9 */
	--base-bg-color-muted: #151821A6; /* change only before A6 */
	--base-txt-color: #9f9eaa;
	--base-txt-color-faded: #9f9eaaD9; /* change only before D9 */
	--base-txt-color-muted: #9f9eaa66; /* change only before 66 */
	--base-lnk-color: #617fa4;
	--base-lnk-hov-color: #A35154;
	--base-border-color: #9f9eaa4D;
	
	--main-nav-bg-color: #0b0d13;
	--main-nav-bg-color-faded: #0b0d13D9; /* change only before D9 */
	--main-nav-bg-color-muted: #0b0d13A6; /* change only before A6 */
	--main-nav-txt-color: #d0d5e2;
	--main-nav-lnk-color: #d0d5e2;
	--main-nav-lnk-hov-color: #548BA5;
	
	--box-bg-color: #53798b1A; /* change only before 1A */
	--box-alt-bg-color: #548BA51A; /* change only before 1A */
	
	--primary-accent-color: #548BA5;
	--primary-accent-color-faded: #548BA5D9; /* change only before D9 */
	--primary-accent-color-muted: #548BA5A6; /* change only before A6 */
	--secondary-accent-color: #A35154;
	--secondary-accent-color-faded: #A35154D9; /* change only before D9 */
	--secondary-accent-color-muted: #A35154A6; /* change only before A6 */
}

/* LIGHT MODE (says dark but this is ACTUALLY LIGHT, dark loads first and i'm too lazy to edit javascript) */
[data-theme="dark"] {
    --banner-image: url('/wcc_assets/themes/The Vivarium/sonia4kres.png');
    --banner-image-no-subject: url('/wcc_assets/themes/The Vivarium/sonia4kres_nosubject.png'); /* basically mimics banner but no subject for pattern purposes */
	--texture-image: url(https://www.transparenttextures.com/patterns/asfalt-light.png);
	
	--base-bg-color: #eeeae5;
	--base-bg-color-body-overlay: #eeeae5F2; /* change only before F2 */
	--base-bg-color-faded: #e1dad3D9; /* change only before D9 */
	--base-bg-color-muted: #e1dad3A6; /* change only before A6 */
	--base-txt-color: #252e3c;
	--base-txt-color-faded: #252e3cD9; /* change only before D9 */
	--base-txt-color-muted: #252e3c66; /* change only before 66 */
	--base-lnk-color: #894C45;
	--base-lnk-hov-color: #BC735D;
	--base-border-color: #252e3c4D;
	
	--main-nav-bg-color: #2e3a4b;
	--main-nav-bg-color-faded: #2e3a4bD9; /* change only before D9 */
	--main-nav-bg-color-muted: #2e3a4bA6; /* change only before A6 */
	--main-nav-txt-color: #A7ADAF;
	--main-nav-lnk-color: #E7D3BF;
	--main-nav-lnk-hov-color: #E5A180;
	
	--box-bg-color: #778EA01A; /* change only before 1A */
	--box-alt-bg-color: #A385871A; /* change only before 1A */
}