/* Theme variables */

html, :root {
	/* Base colours */
	/* Gray color palette */
	--gray-50: rgb(255, 255, 255);
	--gray-100: rgb(248, 250, 252);
	--gray-200: rgb(241, 245, 249);
	--gray-300: rgb(231, 236, 244);
	--gray-400: rgb(222, 227, 232);
	--gray-500: rgb(186, 198, 214);
	--gray-600: rgb(98, 120, 149);
	--gray-700: rgb(94, 91, 119);
	--gray-800: rgb(39, 38, 51);
	--gray-900: rgb(33, 37, 41);
	--gray-950: rgb(27, 29, 35);

	/* Dark gray color palette */
	--dark-gray-50: rgb(255, 255, 255);
	--dark-gray-100: rgb(248, 250, 252);
	--dark-gray-200: rgb(201, 209, 217);
	--dark-gray-300: rgb(134, 149, 168);
	--dark-gray-400: rgb(117, 131, 152);
	--dark-gray-500: rgb(71, 79, 92);
	--dark-gray-600: rgb(54, 61, 73);
	--dark-gray-700: rgb(36, 41, 51);
	--dark-gray-750: rgb(43, 51, 60);
	--dark-gray-800: rgb(30, 32, 41);
	--dark-gray-900: rgb(22, 25, 33);
	--dark-gray-950: rgb(15, 17, 23);

	--plain-rgb: 255,255,255;

	--navy: rgb(29, 62, 111);
	--navy-rgb: 29,62,111;
	--secure-purple: rgb(33, 21, 81);
	--secure-purple-rgb: 33,21,81;

	--primary-base: rgb(91, 200, 217);
	--primary-light: rgb(124, 221, 236);
	--primary-dark: rgb(36, 118, 131);
	--primary-rgb: 91,200,217;
	--primary-rgb-faded: rgba(var(--primary-rgb), 0.2);
	--success-secure: rgb(85, 195, 57);
	--success-light: rgb(162, 219, 118);
	--success-dark: rgb(45, 155, 17);
	--success-rgb: 85,195,57;
	--success-rgb-faded: rgba(var(--success-rgb),0.2);
	--warning-secure: rgb(251, 144, 18);
	--warning-light: rgb(252, 173, 83);
	--warning-dark: rgb(231, 124, 0);
	--warning-rgb: 251,144,18;
	--warning-rgb-faded: rgba(var(--warning-rgb),0.2);
	--danger: rgb(231, 59, 78);
	--danger-light: rgb(248, 109, 125);
	--danger-dark: rgb(211, 39, 58);
	--danger-rgb: 231,59,78;
	--danger-rgb-faded: rgba(var(--danger-rgb),0.2);
	
	--text: rgb(33, 37, 41);
	--text-rgb: 33,37,41;
	--text-contrast: var(--gray-50);
	--text-disabled: var(--gray-500);
	--muted: var(--gray-600);

	--app-icon: linear-gradient( 5deg, rgb(71, 187, 213) 0%, rgb(115, 222, 239) 100%);
	--app-icon-sub-icon: rgb(71, 187, 213);

	/* Structure styling */
	--background: var(--gray-300);
	--background-hover: var(--gray-200);
	--box: var(--gray-50);
	--box-border: var(--gray-400);
	--section-header-border: var(--gray-700);
	--border-strong: var(--gray-500);
	--border-light: rgba(10,10,30,0.06);
	--card-background: var(--gray-200);

	--scrollbar-track: var(rgb(241, 241, 241));
	--scrollbar-thumb: var(rgb(153, 153, 153));

	--shadow-small: 2px 4px 8px rgba(10,20,40,0.15);
	--shadow-medium: 3px 6px 12px rgba(10,20,40,0.19);
	--shadow-large: 4px 8px 18px rgba(10,20,40,0.24);

	/* Table styling */
	--table-border: var(--gray-50);
	--table-header: var(--secure-purple);
	--table-row: var(--gray-50);
	--table-row-hover: var(--gray-100);
	--table-row-border: var(--gray-50);
	--table-footer-color: var(--gray-700);
	--background-column-total: var(--gray-500);

	/* Form styling */
	--invalid: rgb(251, 229, 214);
	--invalid-border: var(--warning-secure);
	--help-icon: rgba(10, 10, 40, 0.35);
	--form-control: var(--gray-300);
	--input: var(--gray-50);
	--input-border: var(--gray-500);
	--input-border-disabled: var(--gray-400);
	--input-text: var(--gray-800);
	--button-text: var(--navy);

	--info: rgb(91, 192, 222);
	--info-rgb: 91,192,222;
	--overlay: rgba(186,198,214,0.65);
	--nav: var(--gray-50);
	--nav-border: var(--gray-500);
	--nav-hover: var(--gray-300);

	--modal: var(--gray-50);
	--modal-border: var(--gray-500);
	--modal-hover: var(--gray-300);

	--form-control-container: rgba(5,15,40,0.07);

	--searchcompose-drop-background: var(--gray-700); /* TODO: What is this? */
}

html.dark-theme, :root.dark-theme {
	--navy: var(--dark-gray-100);
	--navy-rgb: 229,231,235;
	--plain-rgb: 0,0,0;

	--primary-base: rgb(75, 175, 222);
	--primary-dark: rgb(108, 193, 232);
	--primary-light: rgb(42, 139, 161);
	--primary-rgb: 75,175,222;
	--primary-rgb-faded: rgba(var(--primary-rgb), 0.4);
	--success-secure: rgb(62, 207, 142);
	--success-dark: rgb(232, 247, 240);
	--success-light: rgb(38, 160, 103);
	--success-rgb: 62,207,142;
	--success-rgb-faded: rgba(var(--success-rgb),0.5);
	--warning-secure: rgb(222, 175, 75);
	--warning-dark: rgb(250, 246, 232);
	--warning-light: rgb(184, 146, 58);
	--warning-rgb: 222,175,75;
	--warning-rgb-faded: rgba(var(--warning-rgb),0.7);
	--danger: rgb(222, 110, 75);
	--danger-dark: rgb(250, 242, 240);
	--danger-light: rgb(184, 89, 58);
	--danger-rgb: 222,110,75;
	--danger-rgb-faded: rgba(var(--danger-rgb),0.5);

	--text: var(--gray-200);
	--text-rgb: 226,232,240;
	--text-contrast: var(--dark-gray-800);
	--text-disabled: var(--dark-gray-400);
	--muted: var(--dark-gray-300);

	--app-icon: linear-gradient( 5deg, rgb(58, 149, 176) 0%, rgb(75, 168, 199) 100%);
	--app-icon-sub-icon: rgb(58, 149, 176);

	--background: var(--dark-gray-800);
	--background-hover: var(--dark-gray-700);
	--box: var(--dark-gray-700);
	--box-border: var(--dark-gray-500);
	--section-header-border: var(--dark-gray-500);
	--border-strong: var(--dark-gray-400);
	--border-light: rgba(71,79,92,0.5);
	--card-background: var(--dark-gray-800);

	--scrollbar-track: var(--dark-gray-700);
	--scrollbar-thumb: var(--dark-gray-500);

	--shadow-small: 2px 4px 8px rgba(75,175,222,0.15);
	--shadow-medium: 3px 6px 12px rgba(75,175,222,0.19);
	--shadow-large: 4px 8px 18px rgba(75,175,222,0.24);

	/* Table styling */

	--table-row: var(--box);
	--table-row-hover: var(--box-border);
	--table-row-selected: var(--dark-gray-500);
	--table-border: var(--dark-gray-400);
	--table-header: var(--dark-gray-300);
	--table-row-border: var(--dark-gray-400);
	--table-footer-color: var(--dark-gray-300);
	--background-column-total: var(--dark-gray-400);

	/* Form styling */
	--invalid: rgb(58, 35, 35);
	--invalid-border: rgb(222, 110, 75);
	--help-icon: var(--dark-gray-400);
	--form-control: rgb(35, 37, 44);
	--input: rgb(35, 37, 44);
	--input-border: rgb(63, 74, 89);
	--input-border-disabled: rgb(42, 45, 54);
	--input-text: var(--dark-gray-300);
	--button-text: var(--text);

	--info: rgb(75, 175, 222);
	--info-rgb: 75,175,222;
	--overlay: rgba(49, 54, 70, 0.66);
	--nav: rgb(17, 18, 22);
	--nav-border: rgb(63, 74, 89);
	--nav-hover: rgb(35, 37, 44);

	--modal: var(--box);
	--modal-border: var(--dark-gray-400);
	--modal-hover: var(--dark-gray-500);

	--form-control-container: rgba(171, 181, 207, 0.1);

	--searchcompose-drop-background: var(--dark-gray-400);

	color: var(--text);
}

/*# sourceMappingURL=theme.css.map*/