body,
html {
	scrollbar-color: var(--main-surface-tertiary) transparent;
	background-color: var(--main-surface-primary);
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
		Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol;
}

:root {
	--white: #fff;
	--black: #000;
	--gray-50: #f9f9f9;
	--gray-100: #ececec;
	--gray-200: #e3e3e3;
	--gray-300: #cdcdcd;
	--gray-400: #b4b4b4;
	--gray-500: #9b9b9b;
	--gray-600: #676767;
	--gray-700: #424242;
	--gray-750: #2f2f2f;
	--gray-800: #212121;
	--gray-900: #171717;
	--gray-950: #0d0d0d;
	--red-500: #ef4444;
	--red-700: #b91c1c;
	--brand-purple: #ab68ff;

	--composer-surface: hsla(0, 0%, 94%, 0.9);
	--composer-bar_mask-grace-area: 25px;
	--dot-color: var(--black);
	--text-primary: var(--gray-950);
	--text-secondary: #7d7d7d;
	--text-tertiary: var(--gray-400);
	--text-quaternary: var(--gray-300);
	--tag-blue: #08f;
	--tag-blue-light: #0af;
	--text-error: #f93a37;
	--text-placeholder: rgba(0, 0, 0, 0.7);
	--surface-error: 249 58 55;
	--border-xlight: rgb(0 0 0/5%);
	--border-light: rgba(0, 0, 0, 0.1);
	--border-medium: rgba(0, 0, 0, 0.15);
	--border-heavy: rgba(0, 0, 0, 0.2);
	--border-xheavy: rgba(0, 0, 0, 0.25);
	--hint-text: #08f;
	--hint-bg: #b3dbff;
	--border-sharp: rgb(0 0 0/5%);
	--main-surface-primary: var(--white);
	--main-surface-secondary: var(--gray-50);
	--main-surface-tertiary: var(--gray-100);
	--sidebar-surface-primary: var(--gray-50);
	--sidebar-surface-secondary: var(--gray-100);
	--sidebar-surface-tertiary: var(--gray-200);
	--link: #2964aa;
	--link-hover: #749ac8;
	--selection: #007aff;
	--brrlogo: #7a7a7a42;
	--maintext: rgb(103 103 103 / 1);
	--btnenter: rgb(244 244 244 / 1);
	--btnrl: rgb(227 227 227 / 1);
	--btnrlborder: transparent;
	--actv: black;
	--bgscroll: linear-gradient(
		to left,
		rgb(255, 255, 255) 50%,
		rgba(0, 0, 0, 0)
	);
	--scrollbtn: rgb(236 236 236 / 1);
	--rec: rgb(245 245 245 / 1);
	--header-add: rgb(255 255 255 /1);
	--header-add-bg: rgb(13 13 13 /1);
	--header-add-bg-h: rgb(33 33 33 /1);
	--overlay: #00000080;
	--btnsov: linear-gradient(rgb(255, 255, 255), rgba(0, 0, 0, 0));
	--hovbtn: #0000000d;
	--btndown-bg: rgb(13 13 13 / 1);
	--btndown-c: rgb(255 255 255 / 1);
	--btndownoverlay: linear-gradient(
		to top,
		rgb(255, 255, 255),
		rgba(0, 0, 0, 0)
	);
	--btnscrepka: #fff;
	--roi: var(--white);
	--hovsd: var(--main-surface-secondary);
	--plhdrcolor: #fff;
	
	--select-btn-text: #f9f9f9;
	--select-btn-bg: #000000;
	
}

[data-theme='dark'] {
	--composer-surface: rgba(50, 50, 50, 0.8);
	--composer-bar_mask-grace-area: 55px;
	--dot-color: var(--white);
	--text-primary: var(--gray-100);
	--text-secondary: var(--gray-400);
	--text-tertiary: var(--gray-500);
	--text-quaternary: var(--gray-600);
	--text-placeholder: hsla(0, 0%, 100%, 0.8);
	--text-error: #f93a37;
	--border-xlight: hsla(0, 0%, 100%, 0.05);
	--border-light: hsla(0, 0%, 100%, 0.1);
	--border-medium: hsla(0, 0%, 100%, 0.15);
	--border-heavy: hsla(0, 0%, 100%, 0.2);
	--border-xheavy: hsla(0, 0%, 100%, 0.25);
	--border-sharp: hsla(0, 0%, 100%, 0.05);
	--main-surface-primary: var(--gray-800);
	--main-surface-secondary: var(--gray-750);
	--main-surface-tertiary: var(--gray-700);
	--sidebar-surface-primary: var(--gray-900);
	--sidebar-surface-secondary: var(--gray-800);
	--sidebar-surface-tertiary: var(--gray-750);
	--link: #7ab7ff;
	--link-hover: #5e83b3;
	--brrlogo: #ffffff1a;
	--maintext: rgb(155 155 155 / 1);

	--btnrl: transparent;
	--actv: rgb(16 163 127);
	--btnrlborder: hsla(0, 0%, 100%, 0.15);
	--bgscroll: linear-gradient(
		to left,
		rgb(33, 33, 33) 50%,
		rgba(33, 33, 33, 0)
	);
	--scrollbtn: rgb(66 66 66 / 1);
	--rec: rgb(66 66 66 / 1);
	--header-add: rgb(13 13 13 / 1);
	--header-add-bg: rgb(249 249 249 / 1);
	--header-add-bg-h: rgb(236 236 236/1);
	--overlay: #000c;
	--btnsov: linear-gradient(rgb(47, 47, 47), rgba(0, 0, 0, 0));
	--hovbtn: #424242;
	--btndown-c: rgb(13 13 13 / 1);
	--btndown-bg: rgb(249 249 249 / 1);
	--btndownoverlay: linear-gradient(to top, rgb(47, 47, 47), rgba(0, 0, 0, 0));
	--btnscrepka: #black;
	--roi: #2f2f2f;
	--hovsd: #424242;
	--plhdrcolor: black;
	
	--select-btn-text: #000000;
	--select-btn-bg: #f9f9f9;
}