:root {
	--font-header: "Lexend", sans-serif;
	--font-body: "Montserrat", sans-serif;
	--icon-theme: "\f042";
	--icon-speak: "\f0e5";
	--transition: all 0.3s ease-in-out;
		--bg-footer: color-mix(in hsl, var(--bg-primary) 95%, transparent 5%);
}

@view-transition {
	navigation: auto;
}

.theme-light {
	--text-primary: #fff;
	--text-secondary: #000;
	--text-accent: #f04;
	--text-tertiary: #505050;
	--text-note: #888;
	--bg-primary: #fff;
	--bg-secondary: #f5f5f5;
	--bg-tertiary: #e9e9e9;
	--bg-overlay: #00000033;
	--bg-overlay-hover: #ddd3;
	--scrollbar-track: #f1f1f1;
	--scrollbar-thumb: #c1c1c1;
	--filter-inversion: invert(0);
	--mainPagePhoto: url("../imgs/heroes/light/Hero_Prelude01.png");
	--border-speech-img: url(../imgs/borders/border-light.png) 30 round;
	--shadow-color: #122b6914;
	--box-shadow:
		0 2px 6px var(--shadow-color), 0 1px 2px var(--shadow-color),
		0 0 0 1px var(--shadow-color);
	--box-shadow-hover: 0 0 140px 0 #07090d14;
	--hero-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

.theme-dark {
	--text-primary: #fff;
	--text-secondary: #fff;
	--text-accent: #ff0045;
	--text-tertiary: #999;
	--text-note: #888;
	--bg-primary: #1d1d1d;
	--bg-secondary: #151515;
	--bg-tertiary: #141414;
	--bg-overlay: #0006;
	--bg-overlay-hover: #ddd3;
	--scrollbar-track: #0e0e0e;
	--scrollbar-thumb: #3e3e3e;
	--filter-inversion: invert(1);
	--mainPagePhoto: var(--hero-gradient), url("../imgs/heroes/light/Hero_Prelude01.png");
	--border-speech-img: url(../imgs/borders/border-light.png) 30 round;
	--shadow-color: var(--bg-overlay);
	--box-shadow:
		0 2px 6px var(--shadow-color), 0 1px 2px var(--shadow-color),
		0 0 0 1px var(--shadow-color);
	--box-shadow-hover: 0 0 140px 0 var(--text-accent);
	--hero-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}