@import "../scss/mixins";

// Fonts
:root {
	--font-sans: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
	--font-accent: "Fira Code", monospace;
}

// Breakpoints and containers
:root {
	--mobile: 768px;
	--reading-width: 1000px;
}

// Spatial sizing
:root {
	// Fonts sizes
	--font-xx:  0.60rem;
	--font-xs:	0.75rem;
	--font-s: 	0.875rem;
	--font-r-s: 1.00rem;
	--font-r: 	1.00rem;
	--font-m: 	1.125rem;
	--font-l: 	2.00rem;
	--font-xl-l: 3.75rem;
	--font-xl: 	3.75rem;
	
	// Marging/padding sizes
	--size-4-: 0.25rem;
	--size-3-: 0.35rem;
	--size-2-: 0.50rem;
	--size-1x: 1.00rem;
	--size-2x: 2.00rem;
	--size-3x: 3.00rem;
	--size-4x: 4.00rem;
	--size-5x: 5.00rem;
	--size-6x: 7.00rem;
	--size-7x: 10.00rem;
}

// Spatial sizing
@include media($max: $mobile) {
	:root {
		// Fonts sizes
		--font-xx:  0.60rem;
		--font-xs:	0.75rem;
		--font-s: 	0.875rem;
		--font-r-s: 0.875rem;
		--font-r: 	0.95rem;
		--font-m: 	1.00rem;
		--font-l: 	2.00rem;
		--font-xl-l: 2.00rem;
		--font-xl: 	2.75rem;

		// Marging/padding sizes
		--size-4-: 0.25rem;
		--size-3-: 0.35rem;
		--size-2-: 0.50rem;
		--size-1x: 1.00rem;
		--size-2x: 1.50rem;
		--size-3x: 2.00rem;
		--size-4x: 3.00rem;
		--size-5x: 4.00rem;
		--size-6x: 5.50rem;
		--size-7x: 7.00rem;
	}
}

// Dark mode theme
:root[data-theme='dark'] {
	--primary-bright:	#ffffff;
	--primary:			#bfbfbf;
	--primary-dim:		#888889;
	--primary-dim2:		#262627;
	--primary-dark:		#141415;
	
	--secondary: 		#7feaff;
	--secondary-bright: #5f8cff;
	
	--background: 		#060708;
	--background-dim:	#08090a;
	--background-dim2:	#0e0f11;
	
	--neon-1-1: #a7d575;
	--neon-1-2: #52abc4;
	--neon-2-1: #37eaf7;
	--neon-2-2: #c624ee;

	--icon-bright: #ffffff;

	--brightness-low:	100%;
	--brightness-high:	100%;

	--mesh-color-1: #060708;
    --mesh-color-2: #030408;
    --mesh-color-3: #05070a;
    --mesh-color-4: #0c1019;

	color-scheme: dark;
} 

// Light mode theme
:root[data-theme='light'],
:root[data-theme='undefined'] {
	--primary-bright:	#000000;
	--primary: 			#2e2e2e;
	--primary-dim:		#3a3a3a;
	--primary-dim2:		#585858;
	--primary-dark:		#dfdfdf;

	--secondary: 		#002aff;
	--secondary-bright:	#4800ff;

	--background: 		#ededed;
	--background-dim:	#fbfbfb;
	--background-dim2:	#fefefe;

	--neon-1-1: #424bff;
	--neon-1-2: #2493ee;
	--neon-2-1: #37eaf7;
	--neon-2-2: #c624ee;

	--icon-bright: var(--neon-1-1);

	--mesh-color-1: #96c4f3;
    --mesh-color-2: #96a8f2;
    --mesh-color-3: #bad0ef;
    --mesh-color-4: #c8ceda;
}

// Unicorn mode theme
:root[data-theme='unicorn'] {
	--primary-bright:	#000000;
	--primary: 			#2e2e2e;
	--primary-dim:		#464646;
	--primary-dim2:		#585858;
	--primary-dark:		#dfdfdf;

	--secondary: 		#ff00bb;
	--secondary-bright:	#feff00;

	--background: 		#ffffff;
	--background-dim:	#fbfbfb;
	--background-dim2:	#fefefe;

	--neon-1-1: #37eaf7;
	--neon-1-2: #c624ee;
	--neon-2-1: #eaf737;
	--neon-2-2: #2493ee;

	--icon-bright: var(--neon-1-1);

	--mesh-color-1: #96c4f3;
    --mesh-color-2: #f296cc;
    --mesh-color-3: #efe2ba;
    --mesh-color-4: #c8d7da;
}