:root {
	/* ==========
	COLORS
	========== */
	/* color definitions */
	--black: #200B4F;
	--black-rgb: 32, 11, 79;
	--white: #F8F7FB;
	--white-rgb: 248, 247, 251;
	--white-darker: #F1EDF9;
	--white-grayer: #EBE9EF;
	--light-gray-violet: #C9B8DA; /* many light svg icons have this color */
	--light-gray-violet-washed: #D6C9E3;
	--dusty-purple: #a75f9b; /*unused*/
	--dusty-purple-rgb: 167, 95, 155;
	--soft-violet:#a791d9; /*unused*/
	--soft-violet-rgb:167, 145, 217;
	--dark-violet:#271255;
	--dark-violet-desaturated:#5b4c7d;
	--dark-violet-desaturated-rgb:91, 76, 125;
	--violet:#9F6AF5;
	--violet-rgb:159, 106, 245;
	--violet-light: #a791d9;
	--violet-strong: #935efe;
	--blue:#0f1fd9;
	--soft-pink:#FDE4E7;
	--salmon:#ff7676;
	--salmon-rgb:255, 118, 118;
	--salmon-light:#FF9592;
	--salmon-strong: #FE5858;

	/*main identity rainbow gradient*/
	--rainbow-1:#6b29ff; /* dark saturated violet */
	--rainbow-1-rgb: 107, 41, 255;
	--rainbow-2:#935efe; /* same as violet strong */
	--rainbow-2-rgb: 147, 94, 254;
	--rainbow-3:#fcdbdd; /* cherry blossom petal */
	--rainbow-3-rgb: 252, 219, 221;
	--rainbow-4:#fe827a; /* orange-salmon */
	--rainbow-4-rgb:254, 130, 122;

	--menu-line-gradient: linear-gradient(133deg, #d4bdfd, #f58398); /*these colors are not used anywhere else*/
	--adspawn-gradient: linear-gradient(90deg, var(--rainbow-1), var(--rainbow-2), var(--rainbow-3), var(--rainbow-4), var(--rainbow-1));
	--adspawn-gradient-simple: linear-gradient(90deg, var(--rainbow-1) 0%, var(--rainbow-2) 34%, var(--rainbow-4) 100%);
	--background-radial-gradient-1: radial-gradient(circle at 5% 100%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 65%);
	--background-radial-gradient-2: radial-gradient(circle at 100% 100%, rgba(255, 64, 64, 0.4), rgba(255, 64, 64, 0) 75%);
	--background-radial-gradient-3: radial-gradient(circle at 100% 0%,  rgba(255, 165, 236, 0.4), rgba(255, 165, 236, 0) 75%);
	--background-radial-gradient-4: radial-gradient(circle at 0 0,  rgba(80, 0, 255, 0.4), rgba(80, 0, 255, 0) 75%);

	/* semantic (currently "light mode" only) */
	--color-ink: var(--black); /*regular text*/
	--color-ink-rgb: var(--black-rgb);
	--color-ink-soft: var(--dark-violet-desaturated); /*input placeholder or other "softer" text*/
	--color-ink-soft-rgb: var(--dark-violet-desaturated-rgb);
	--color-ink-muted: var(--light-gray-violet); /*"grayed out" text/hints*/
	--color-ink-inverted-base:rgba(var(--color-base-rgb), 0.7);
	--color-base: var(--white); /*regular background receessive color*/
	--color-base-rgb: var(--white-rgb);
	--color-base-stronger: var(--white-darker); /*a more prominent background recessive color (ie highlighting important info in tables(*/
	--color-base-grayer: var(--white-grayer); /*a washed out background recessive color (ie disabled empty input)*/
	--color-base-inverted: var(--dark-violet); /*inverted background color (ie footer)*/
	--color-link: var(--salmon-strong);
	--color-link-inverted-base: var(--violet-light);
	--color-error: var(--salmon-strong);
	--color-highlight-backdrop: var(--salmon-light);
	--color-highlight-front: var(--white);
	--color-active-outline: var(--violet);
	--color-content-loading-overlay-rgb: var(--soft-violet-rgb);

	--color-main-button-intensive: var(--salmon); /*red button, strong action, warnings*/
	--color-main-button-intensive-rgb: var(--salmon-rgb);
	--color-main-button-intensive-gradient-1:var(--rainbow-4);
	--color-main-button-intensive-gradient-2:var(--salmon-strong);
	--color-main-button-calm: var(--violet); /*purple button, calmer, neutral action*/
	--color-main-button-calm-rgb: var(--violet-rgb);
	--color-main-button-calm-gradient-1:var(--salmon);
	--color-main-button-calm-gradient-2:var(--violet);
	--color-main-button-text:var(--soft-pink);
	--color-transparent-button-hover:var(--white-darker);

	--color-list-mark:rgba(var(--soft-violet-rgb), 0.15);

	--color-layout-border: var(--light-gray-violet-washed);
	--color-input-border: rgba(var(--dusty-purple-rgb), 0.4);
	--color-control-border: rgba(var(--dusty-purple-rgb), 0.2);
	--color-control-mark: rgba(var(--violet-strong));
	--color-shadow: rgba(0, 0, 0, 0.08);


	/* ==========
	REUSABLES
	========== */
	--layout-border: 1px solid var(--color-layout-border);
	--input-border: 1px solid var(--color-input-border);
	--control-border: 1px solid var(--color-control-border);
	--box-shadow-input-focus:rgba(var(--black-rgb), 0.2) 0 0 1em 0.2em;

	--main-button-calm-gradient: linear-gradient(113deg, var(--color-main-button-calm-gradient-1) 0%, var(--color-main-button-calm-gradient-2) 50%, var(--color-main-button-calm-gradient-2) 100%);
	--main-button-intensive-gradient: linear-gradient(113deg, var(--color-main-button-intensive-gradient-1) 0%, var(--color-main-button-intensive-gradient-2) 50%, var(--color-main-button-intensive-gradient-2) 100%);

	--shadow-small: var(--color-shadow) 0.25em 0.25em 0 0;
	--shadow-medium: var(--color-shadow) 0.5em 0.5em 0 0;
	--shadow-large: var(--color-shadow) 1em 1em 0 0;
	--border-radius-tiny:2px; /*just a nudge for very small elements so their corners are not sharp*/
	--border-radius-control:3px; /*inputs, buttons, control elements*/
	--border-radius-layout:4px; /*tabs, cards, pages*/

	--noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 2000 2000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	--noise-size: 2000px;
}