:root {
	/* fontsizes */
	--fs-alpha: 12px;
	--fs-beta: 13px;
	--fs-charlie: 14px;
	--fs-delta: 15px;
	--fs-epsilon: 16px;
	--fs-zeta: 17px;
	--fs-heta: 18px;
	--fs-theta: 19px;
	--fs-iota: 20px;
	--fs-kappa: 21px;
	--fs-lambda: 22px;
	--fs-mu: 23px;
	--fs-nu: 24px;
	--fs-xi: 25px;
	--fs-omicron: 29px;
	--fs-pi: 33px;
}

.light-mode {
	/* colors */
		--system-clr-default: #292A2F;
		/* default */
		--system-clr-strong: #1C1E21;
		--system-clr-subtle: #45474D;
		--system-clr-soft: #676A6F;
		--system-clr-disabled: #979A9F;
		--system-clr-accent: #2767E3;
		--system-clr-accent-2: #2F6BDF;
		--system-clr-inverse: #FFFFFF;
		--system-clr-disabled-rgba: rgba(250, 251, 252, 45%);
		--system-clr-warn: #CC2E35;
		--system-clr-placeholder: #676A6F;
	
		/* btn */
		--system-clr-btn-light-default: #EBECEE;
		--system-clr-btn-default: #007BFF;
		--system-clr-btn-hover-tint: rgba(0, 0, 0 / 20%);
		--system-clr-btn-pressed-tint: rgba(0, 0, 0 / 40%);
		--system-clr-btn-disabled: #D5D7DA;
	
		/* hover */
		--system-clr-hover: #F1F2F3;
		--system-clr-active: #EBECEE;
		--system-clr-light-active: #E7EFFE;
	
		/* border color */
		--system-clr-border-strong: #D5D7DA;
		--system-clr-border-default: #E4E6E8;
		--system-clr-border-min: #EBECEE;
		--system-clr-border-min-rgba: rgba(0, 0, 0, 7%);
		--system-clr-border-accent: #287ECE;
	
		/* background */
		--system-clr-bg-dark-default: #1B1C21;
		--system-clr-bg-snackbar: #1C1E21;
		--system-clr-bg-default: #FFFFFF;
		--system-clr-bg-subtle: #F1F2F3;
		--system-clr-bg-overlay: #FFFFFF;
		--system-clr-bg-card: #FFFFFF;
		--system-clr-bg-green-subtle: #E8FBF0;
		--system-clr-bg-login-gradient: radial-gradient(circle at top center, rgba(0, 0, 0, 0) 0%, rgba(37, 46, 255, .18) 57%, rgba(45, 136, 220, 1) 100%),
			#1B1C21;
	
		/* icon */
		--system-clr-ico-default: #45474C;
		--system-clr-ico-subtle: #676A6F;
		--system-clr-ico-soft: #888B90;
		--system-clr-ico-accent: #2767E3;
		--system-clr-ico-disabled: #A6A9AD;
		--system-clr-ico-green: #207243;
	
		/* horizontal line */
		--system-clr-divider: #EBECEE;
	
	
	
		/* boxshadow */
		--system-clr-floating-shadow: 0 0 2px 0 rgba(0, 0, 0, 16%), 0 6px 24px 0 rgba(0, 0, 0, 12%);
		--system-clr-input-shadow: 0 2px 4px 0 rgba(0, 0, 0, 20%), 0 0 0 4px rgba(39, 103, 227, 25%);
		--system-clr-card-shadow: 0 8px 4px -6px rgba(0, 2, 4, 2%), 0 2px 4px 0 rgba(0, 2, 4, 5%);
		--system-clr-snackbar-shadow: 0 16px 48px 0 rgba(0, 0, 0, 32%), 0 4px 8px 0 rgba(0, 0, 0, 16%);
}

.dark-mode {
	--system-clr-bg-dark-default: #1b1c21;
        --btn-clr-hover: #292A33;
	/* dark mode on */
		--system-clr-default: #E6E7EB;
		/* default */
		--system-clr-strong: #FAFBFC;
		--system-clr-subtle: #939BA5;
		--system-clr-soft: #6A7078;
		--system-clr-accent: #2998FF;
		--system-clr-accent-2: #287ECE;
		--system-clr-disabled: #606169;
		--system-clr-inverse: #FFFFFF;
		--system-clr-disabled-rgba: rgba(250, 251, 252, 45%);
		--system-clr-warn: #FF444C;
		--system-clr-placeholder: #8c8d93;
		--system-clr-text: #939BA5;
	
		/* btn */
		--system-clr-btn-light-default: #2D2F38;
		--system-clr-btn-default: #1180FF;
	
		/* hover */
		--system-clr-hover: #292A33;
		--system-clr-active: #2D2F38;
		--system-clr-light-active: #1F2B42;
	
		/* background */
		--system-clr-bg-default: #1B1C21;
		--system-clr-bg-subtle: #F1F2F3;
		--system-clr-bg-overlay: #FFFFFF;
		--system-clr-bg-snackbar: #292A31;
		--system-clr-bg-card: #1F2026;
		--system-clr-bg-green-subtle: #0D653D;
		--system-clr-bg-login-gradient: radial-gradient(223.59% 100% at 50% 0%, rgba(0, 0, 0, 0.00) 0%, rgba(37, 46, 255, 0.38) 0.01%, #2D88DC 100%), #1B1C21;
	 --prefilled-bg: #1C2430;
	 --blue: #107088;
		/* icon */
		--system-clr-ico-default: #D6D6D6;
		--system-clr-ico-subtle: #7A7C84;
		--system-clr-ico-soft: #62666C;
		--system-clr-ico-accent: #2998FF;
		--system-clr-ico-disabled: #4A4C55;
		--system-clr-ico-green: #63EB9C;
	
		/* border color */
		--system-clr-border-strong: #31363D;
		--system-clr-border-default: #31333D;
		--system-clr-border-min: #25272B;
		--system-clr-border-min-rgba: rgba(255, 255, 255, 7%);
		--system-clr-border-accent: #287ECE;
	
		/* horizontal line */
		--system-clr-divider: #25272B;
	
		/* boxshadow */
		--system-clr-floating-shadow: 0 0 2px 0 rgba(0, 0, 0, 16%), 0 6px 24px 0 rgba(0, 0, 0, 12%);
		--system-clr-input-shadow: 0 2px 4px 0 rgba(0, 0, 0, 20%), 0 0 0 4px rgba(39, 103, 227, 25%);
		--system-clr-card-shadow: 0 8px 4px -6px rgba(0, 2, 4, 2%), 0 2px 4px 0 rgba(0, 2, 4, 5%);
		--system-clr-snackbar-shadow: 0 16px 48px 0 rgba(0, 0, 0, 32%), 0 4px 8px 0 rgba(0, 0, 0, 16%);
}