:root {
	/* ==========
	COLOR DEFINITIONS
	========== */
	/* color definitions */
	--void: #242127;
	--black: #34313A;
	--black-rgb: 52, 49, 58;
	--black-lighter: #4f4c58;
	--black-lighter-rgb: 79, 76, 88;
	--gray: #64616b;
	--gray-light: #cbc8d0;
	--gray-lighter: #edecee;
	--white: #F5F4F5;
	--white-rgb: 245, 244, 245;
	--white-colder: #f4f2ff;
	--white-colder-rgb: 244, 242, 255;
	--white-grayer: #ebebeb;
	--white-grayer-rgb: 235, 235, 235;

	/*whateever: #F1EDF9;*/

	/*todo*/
	--light-gray-violet: #C9B8DA; /* many light svg icons have this color + app search disabled text */
	--light-gray-violet-washed: #D6C9E3;
	--soft-violet:#a791d9; /*unused*/
	--soft-violet-rgb:167, 145, 217;

	--purple-heart: #6f28ff; /*600*/
	--purple-heart-rgb: 111, 40, 255;
	--purple-heart-softer:#8c6ce1; /*400*/
	--purple-heart-softer-rgb: 140, 108, 225;
	--purple-heart-light:#BDAEFF; /*300*/
	--purple-heart-dark:#32076e; /*950*/
	/*check these*/
	--blue:#0f1fd9;
	--soft-blue: #622cf5;
	--soft-pink:#FDE4E7;

	--coral-red:#f73c3c;
	--coral-red-rgb: 247, 60, 60;
	--coral-pink: #FFA1A1;
	--coral-pink-rgb: 255, 161, 161;

	/*main identity rainbow gradient*/
	--rainbow-1:var(--purple-heart);
	--rainbow-1-rgb:var(--purple-heart-rgb);
	--rainbow-2:#E57EFF;
	--rainbow-2-rgb: 229, 126, 255;
	--rainbow-3:var(--coral-red);
	--rainbow-3-rgb:var(--coral-red-rgb);
	--rainbow-4:var(--purple-heart);
	--rainbow-4-rgb:var(--purple-heart-rgb);

	--soft-rainbow-1:#c5b5f0; /*--purple-heart-softer at 50% over white*/
	--soft-rainbow-2: #ffd0d0; /*--coral-pink at 50% over white*/

	--adspawn-gradient: linear-gradient(90deg, var(--rainbow-1) 13%, var(--rainbow-2) 55%, var(--rainbow-3), var(--rainbow-1));
	--adspawn-gradient-simple: linear-gradient(108deg, var(--rainbow-1) 10%, var(--rainbow-2) 70%, var(--rainbow-3) 95%);
	--adspawn-gradient-purple: linear-gradient(108deg, #3E1094 10%, #6F28FF 85%);
	--adspawn-gradient-purple-repeating: linear-gradient(108deg, #3E1094 5%, #6F28FF 45%, #6F28FF 65%, #3E1094 90%);
	--adspawn-gradient-warm: linear-gradient(108deg, rgba(140, 108, 255, 0.1) 10%, rgba(var(--coral-pink-rgb), 0.9) 90%);
	--adspawn-gradient-ambient-strong: linear-gradient(133deg, var(--purple-heart) 10%, var(--coral-pink) 80%);

	--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(var(--coral-pink-rgb), 0.7), rgba(var(--coral-pink-rgb), 0) 75%);
	--background-radial-gradient-3: radial-gradient(circle at 100% 0%,  rgba(var(--rainbow-2-rgb), 0.4), rgba(var(--rainbow-2-rgb), 0) 75%);
	--background-radial-gradient-4: radial-gradient(circle at 0 0,  rgba(var(--purple-heart-softer-rgb), 0.7), rgba(var(--purple-heart-softer-rgb), 0) 75%); /*--purple-400*/

	/* ==========
	SEMANTIC COLORS (currently "light mode" only)
	========== */
	--color-ink: var(--black); /*regular text*/
	--color-ink-rgb: var(--black-rgb);
	--color-ink-soft: var(--black-lighter); /*input placeholder or other "softer" text*/
	--color-ink-soft-rgb: var(--black-lighter-rgb);
	--color-ink-muted: var(--light-gray-violet); /*"grayed out" text/hints*/
	--color-ink-inverted-base:var(--white);
	--color-base: var(--white); /*regular background receessive color*/
	--color-base-rgb: var(--white-rgb);
	--color-base-stronger: var(--white-grayer); /*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(--purple-heart-dark); /*inverted background color (ie footer)*/
	--color-base-inverted-desaturated: var(--black);
	--color-link: var(--coral-red);
	--color-link-inverted-base: var(--purple-heart-light);
	--color-error: var(--coral-red);
	--color-error-backdrop: var(--soft-pink);
	--color-highlight-backdrop: rgba(var(--coral-red-rgb), 0.7); /*//todo: untested*/
	--color-highlight-front: var(--white);
	--color-active-outline: var(--coral-red);
	--color-content-loading-overlay-rgb: var(--soft-violet-rgb);

	--color-main-button-intensive: var(--coral-red); /*red button, strong action, warnings*/
	--color-main-button-intensive-rgb: var(--coral-red-rgb);
	--color-main-button-intensive-gradient-1:var(--purple-heart);
	--color-main-button-intensive-gradient-2:var(--coral-red);
	--color-main-button-calm: var(--purple-heart); /*purple button, calmer, neutral action*/
	--color-main-button-calm-rgb: var(--purple-heart-rgb);
	--color-main-button-calm-gradient-1:var(--purple-heart);
	--color-main-button-calm-gradient-2:var(--coral-red);
	--color-main-button-text:var(--soft-pink);
	--color-main-button-intensive-light: var(--white); /*intensive colors bight lightweight monochrome version*/
	--color-main-button-intensive-light-hover:var(--coral-red);
	--color-main-button-intensive-light-text:var(--coral-red);
	--color-main-button-intensive-light-border:var(--coral-red);
	--color-main-button-intensive-plain: var(--coral-red);

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

	--color-layout-border: var(--light-gray-violet-washed);

	/*inputs*/
	--color-input-disabled-background: rgba(var(--black-lighter-rgb), 0.1);
	--color-input-border: transparent;
	--color-input-border-focus: var(--gray-light);
	--color-box-shadow-input: rgba(var(--black-rgb), 0.15);
	--color-box-shadow-input-focus: rgba(var(--black-rgb), 0.2);

	--color-input-selected: var(--coral-red);

	--color-dropzone-accent: var(--coral-red);
	--color-dropzone-accent-rgb: var(--coral-red-rgb);

	--color-loader: var(--coral-red);
	--color-loader-rgb: var(--coral-red-rgb);

	--color-thumbnail-placeholder: var(--light-gray-violet); /*bg behind thumbnails while loading / neutral placeholder*/
	--color-thumbnail-empty-bg: linear-gradient(135deg, var(--soft-pink) 25%, var(--light-gray-violet) 75%); /*decorative bg for "no thumbnail" state*/

	--color-inverted-input-disabled-background: var(--gray-light);
	--color-inverted-input-border: transparent;
	--color-inverted-input-border-focus: var(--purple-heart-light);
	--color-inverted-box-shadow-input: transparent;
	--color-inverted-box-shadow-input-focus: rgba(var(--white-rgb), 0.2);

	--color-inverted-unsaturated-input-disabled-background: var(--gray);
	--color-inverted-unsaturated-input-border: transparent;
	--color-inverted-unsaturated-input-border-focus: var(--gray-light);
	--color-inverted-unsaturated-box-shadow-input: transparent;
	--color-inverted-unsaturated-box-shadow-input-focus: rgba(var(--white-rgb), 0.2);

	/*radio and checkbox elements*/
	--color-checkable-fill-disabled:rgba(var(--black-lighter-rgb), 0.2);
	--color-checkable-fill-marked: var(--purple-heart);
	--color-checkable-fill-hover: rgba(var(--purple-heart-rgb), 0.5);
	--color-checkable-border: var(--black-lighter);
	--color-checkable-mark: var(--white);

	--color-inverted-checkable-fill-disabled:rgba(var(--white-grayer-rgb), 0.2);
	--color-inverted-checkable-fill-marked: var(--white);
	--color-inverted-checkable-fill-hover: var(--purple-heart-light);
	--color-inverted-checkable-border: var(--white-grayer);
	--color-inverted-checkable-mark: var(--purple-heart);

	--color-inverted-unsaturated-checkable-fill-disabled:var(--black-lighter);
	--color-inverted-unsaturated-checkable-fill-marked: var(--white);
	--color-inverted-unsaturated-checkable-fill-hover: var(--gray);
	--color-inverted-unsaturated-checkable-border: var(--white);
	--color-inverted-unsaturated-checkable-mark: var(--black);

	/*control elements for slider navigators/item selector*/
	--color-control-border: var(--light-gray-violet);
	--color-control-mark: rgba(var(--white));
	--color-shadow: rgba(0, 0, 0, 0.08);

	--color-headline: var(--purple-heart);
	--color-headline-highlight: var(--coral-red);

	/* ==========
	REUSABLES
	========== */
	--layout-border: 1px solid var(--color-layout-border);

	--input-border-width:2px;

	--checkable-border-inverted: 1px solid var(--color-inverted-checkable-border);
	--control-border: 1px solid var(--color-control-border);

	--main-button-calm-gradient: linear-gradient(113deg, var(--color-main-button-calm-gradient-1) 0%, var(--color-main-button-calm-gradient-1) 50%, var(--color-main-button-calm-gradient-2) 100%);
	--main-button-calm-gradient-reversed: linear-gradient(113deg, var(--color-main-button-calm-gradient-2) 0%, var(--color-main-button-calm-gradient-2) 50%, var(--color-main-button-calm-gradient-1) 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%);

	--radial-gradient-soft:  var(--background-radial-gradient-1), var(--background-radial-gradient-2), var(--background-radial-gradient-3), var(--background-radial-gradient-4), linear-gradient(white, white);

	--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-inputs:16px; /*inputs, buttons*/
	--border-radius-control:3px; /*checkbox, radios, smaller ui*/
	--border-radius-layout:4px; /*tabs, cards, pages*/
	--border-radius-layout-large:16px;

	--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;
}