/* === P A L L E T === */
:root {
	--color-red: #e15171;
	--color-red-dark: #cf5252;
	--color-red-highlight: #f76564;
	--color-orange: #dc8a2c;
	--color-orange-alt: #ecab48;
	--color-yellow: #e5c55c;
	--color-yellow-alt: #F19722;
	--color-yellow-dark: hsl(44deg 51% 66%);
	--color-green: #9cb15f;
	--color-green-alt: #699148;
	--color-green-highlight: #48D25B;
	--color-green-light: #b7ffaa;
	--color-blue: #3d9ac7;
	--color-blue-dark: rgb(26, 79, 87);
	--color-blue-highlight: #49b3d9;
	--color-purple: #a372ec;
	--color-purple-dark: #763dca;
	--color-purple-light: #9678A0;
	--color-green-dark: #615b43;
	--color-brown: hsl(37deg 23% 85%);
	--color-brown-dark: #423824;
	--color-black: #141315;
	--color-neutral-0: #382452;
	--color-neutral-10: #333;
	--color-neutral-20: #322f2b;
	--color-neutral-25: #3f3e3c;
	--color-neutral-30: #454B40;
	--color-neutral-50: hsl(20deg 4% 26%);
	--color-neutral-60: hsl(266deg 10% 64%);
	--color-neutral-75: #a3978e;
	--color-neutral-90: #f7f7e5;
	--color-neutral-95: hsl(38deg 22% 93%);
	--color-neutral-100: #f7f6f7;
	--color-background-dark: var(--color-neutral-50);
	--color-background-darkest: var(--color-neutral-10);
	--color-background-black: var(--color-neutral-0);
	--color-background-light: var(--color-neutral-100);
	--color-font-light: var(--color-neutral-100);
	--color-font-dark: var(--color-neutral-0);
	--color-font-accent-primary: var(--color-green-alt);
	--color-font-accent-secondary: var(--color-blue);
	--color-selected-light: var(--color-blue);
	--color-game-background: var(--color-neutral-100);
	--color-nav-background: var(--color-background-dark);
	--color-nav-background-selected: var(--color-background-light);
	--color-nav-sub-background: rgba(0, 0, 0, 0.1);
	--color-nav-sub-background-selected: var(--color-nav-background-selected);
	--color-nav-minimal-background: #EBE9ED;
	--color-nav-minimal-font: #918D8A;
	--color-nav-font: var(--color-nav-background-selected);
	--color-nav-font-selected: var(--color-font-dark);
	--color-nav-sub-font: var(--color-nav-font);
	--color-nav-sub-font-selected: var(--color-nav-font-selected);
	--color-section-list: var(--color-list-bg);
	--color-border-list-toolbar: 0.3em solid rgba(0, 0, 0, 0.15);
	--color-error: var(--color-red);
	--color-unread: var(--color-green-highlight);
	--color-completed: var(--color-green-highlight);
	--color-hr-full: var(--color-green-highlight);
	--color-hr-subtle: rgba(0, 0, 0, 0.15);
	--color-list-bg: radial-gradient(circle at top, HSLA(266, 4%, 98%, 1) 0%, HSLA(266, 10%, 92%, 1) 100%);
	/* --color-border-input: #847ab9; */
	--color-border-input: #FFF;
	--color-border-input-focus: var(--color-green-highlight);
	--drop-shadow-50: 0.2em 0.1em 0.25em rgba(0, 0, 0, 0.3);
	--drop-shadow-75: 0.5em 1em 1em rgba(0, 0, 0, 0.5);
	/* drop-shadow(0.2em 0.1em 0.25em rgba(0, 0, 0, 0.3)) -- cards */
	--drop-shadow-75-inset: inset -1em 0em 0.5em -0.7em rgba(0, 0, 0, 0.4);
	--drop-shadow-75-upper: -0.3em -0.2em 0.6em rgba(0, 0, 0, 0.4);
	-webkit-tap-highlight-color: transparent;
	--border: 0.2em solid;
	--border-width: 0.185em;
	--border-radius: 0.25em;
	--border-primary: var(--border) var(--color-blue);
	/* a radial gradient border at 100% opacity. 0%: HSL(60,70,83) 50%: HSL(102,72,81) 100%: HSL(60,70,83) */
	--border-accent: var(--border) radial-gradient(circle, hsl(60deg 70% 83%) 0%, hsl(102deg 72% 81%) 50%, hsl(60deg 70% 83%) 100%);
	--border-input: 0.1em solid var(--border-input-color);
	--hr-linear-neutral-dark:         linear-gradient(90deg, hsla(0, 0%, 80%, 0), hsla(0, 0%, 90%, 0.5), hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 90%, 0.5), hsla(0, 0%, 80%, 0));
	/* ; */
	/* Linear gradient at 100% opacity. 0% HSLA(0, 0, 85%, 0%), 10% HSLA(0, 0, 90%, 100%), 50% HSLA(0, 0, 100%, 100%), 90% HSLA(0, 0, 90%, 100%), 100% HSLA(0, 0, 80%, 0) */
	--hr-linear-neutral-light:        linear-gradient(90deg, hsla(0, 0%, 80%, 0), hsla(0, 0%, 90%, 1), hsla(0, 0%, 100%, 1), hsla(0, 0%, 90%, 1), hsla(0, 0%, 80%, 0));
	/* Same as above, but with a full-stop transparent cutout in the center for text */
	--hr-linear-neutral-light-cutout: linear-gradient(90deg, rgba(217,217,217,0) 0%, rgba(230,230,230,1) 20%, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 58%, rgba(255,255,255,1) 60%, rgba(230,230,230,1) 80%, rgba(217,217,217,0) 100%);
}