/*==============================================================
GENERAL
==============================================================*/

:root {
	--color-typography-1: #fafafa;
	--color-typography-2: #18181b;
	--color-typography-3: #a1a1aa;
	--color-background-1: #09090b;
	--color-background-2: #18181b;
	--color-primary-1: #1d4ed8;
	--color-primary-2: #1d4ed8;
	--color-secondary-1: #27272a;
	--color-secondary-2: #212124;
	--color-transparent-1: rgba(33,33,36,0.0);
	--color-transparent-2: rgba(33,33,36,1.0);
	--color-border-1: #27272a;
}

/*==============================================================
THEMES
==============================================================*/

html[data-theme='light'] {
	--color-typography-1: #09090b;
	--color-typography-2: #fafafa;
	--color-typography-3: #71717a;
	--color-background-1: #ffffff;
	--color-background-2: #fafafa;
	--color-primary-1: #1d4ed8;
	--color-primary-2: #1d4ed8;
	--color-secondary-1: #f4f4f5;
	--color-secondary-2: #212124;
	--color-border-1: #e4e4e7;
}

html[data-theme='dark'] {
	--color-typography-1: #fafafa;
	--color-typography-2: #18181b;
	--color-typography-3: #a1a1aa;
	--color-background-1: #09090b;
	--color-background-2: #18181b;
	--color-primary-1: #1d4ed8;
	--color-primary-2: #1d4ed8;
	--color-secondary-1: #27272a;
	--color-secondary-2: #212124;
	--color-border-1: #27272a;
}