/*
 * ==========================================================================
 * Root : Global Variable & Theme Engine
 * ==========================================================================
 */


:root {

	interpolate-size: allow-keywords;

	/* Default (Light Mode) when Theme Toggle is unchecked */
	color-scheme: light;

	/*
	 * COLORS
	 */

	--hue-mono-0: #FFFFFF;
	--hue-mono-10: #E3DDE8;
	--hue-mono-20: #CCC6D0;
	--hue-mono-30: #B4AEB9;
	--hue-mono-40: #9D97A1;
	--hue-mono-50: #857F8A;
	--hue-mono-60: #6D6772;
	--hue-mono-70: #56505A;
	--hue-mono-80: #3E3843;
	--hue-mono-90: #27212B;
	--hue-mono-100: #09090B;

	--hue-violet-light-3: #EACCFF;
	--hue-violet-light-2: #D499FF;
	--hue-violet-light-1: #BF66FF;
	--hue-violet: #9F00FF;
	--hue-violet-dark-1: #7700BF;
	--hue-violet-dark-2: #500080;
	--hue-violet-dark-3: #280040;

	--hue-blue: #0055FF;
	--hue-green: #00CC66;
	--hue-red: #FF003C;
	--hue-yellow: #FFBF00;

	--hue-primary: var(--hue-violet);
	--hue-secondary: var(--hue-yellow);



	/*
	 * SIZE & SPACE
	 */

	/* -- Core Layout Unit -- */
	
	--column-unit: calc(100vw / 14); /* A single column is 1/14th of the viewport width */
	--container-width: calc(var(--column-unit) * 12);

	/*	Responsive '--card' Per 100% Container
		======================================
		Small	: 1 Card (12 col)
		Medium	: 2 Cards (6 col)
		large	: 3 Cards (4 col)
		Xlarge	: 4 Cards (3 col)
		======================================
	 */
	--card: var(--container-width); 

	/* -- Spacing System -- */

	--space-100: calc(var(--card)/8);

	/* Fractional sizes */
	
	/* minimum 1/8th unit with a 4px minimum size */
	--space-min: clamp(4px, calc(var(--space-100) / 8), 10px); 
	
	--space-25: calc(var(--space-100) / 4);		/* 25% of a column */
	--space-50: calc(var(--space-100) / 2);		/* 50% of a column */
	--space-75: calc(var(--space-100) * 0.75);	/* 75% of a column */

	/* Multiplied sizes */
	--space-125: calc(var(--space-100) * 1.25);	/* 125% of a column */
	--space-150: calc(var(--space-100) * 1.5);	/* 150% of a column */
	--space-175: calc(var(--space-100) * 1.75);	/* 175% of a column */
	--space-200: calc(var(--space-100) * 2);	/* 200% of a column */
	--space-250: calc(var(--space-100) * 2.5);	/* 250% of a column */
	--space-300: calc(var(--space-100) * 3);	/* 300% of a column */
	--space-400: calc(var(--space-100) * 4);	/* 400% of a column */



	/* -- TYPE SCALE -- */

	--card-font-factor: 30; 
	--font-unit: calc(var(--card) / var(--card-font-factor));

	--font-scale: 1.25; /* The base ratio for our type scale */

	--h1: calc(pow(var(--font-scale), 7) * var(--font-unit));
	--h2: calc(pow(var(--font-scale), 6) * var(--font-unit));
	--h3: calc(pow(var(--font-scale), 5) * var(--font-unit));
	--h4: calc(pow(var(--font-scale), 4) * var(--font-unit));
	--h5: calc(pow(var(--font-scale), 3) * var(--font-unit));
	--h6: calc(pow(var(--font-scale), 2) * var(--font-unit));
	--p:  calc(pow(var(--font-scale), 1) * var(--font-unit));
	--label: calc(pow(var(--font-scale), 0.75) * var(--font-unit));
	--small: calc(pow(var(--font-scale), 0.5) * var(--font-unit));



	/*
	 * BORDER WIDTH
	 * A fluid border that scales with the card size,
	 * but is clamped between 1px and 3px.
	 */

	--border-width: calc(var(--p) * 0.1);



	/*
	 * Transition Timing
	 */

	--transition-speed: 0.3s;
	--transition-ease: cubic-bezier(0.42, 0, 0.58, 1);
}

@media( min-width: 500px ) {
	:root {
		--card: calc(var(--container-width) / 2);
	}
}

@media( min-width: 1000px ) {
	:root {
		--card: calc(var(--container-width) / 3);
	}
}

@media( min-width: 1500px ) {
	:root {
		--card: calc(var(--container-width) / 4);
	}
}

:root:has(#theme-toggle:checked) {
	/* -- Invert Color for Dark Mode -- */

    color-scheme: dark;

	--hue-mono-0: #09090B;
	--hue-mono-10: #27212B;
	--hue-mono-20: #3E3843;
	--hue-mono-30: #56505A;
	--hue-mono-40: #6D6772;
	--hue-mono-50: #857F8A;
	--hue-mono-60: #9D97A1;
	--hue-mono-70: #B4AEB9;
	--hue-mono-80: #CCC6D0;
	--hue-mono-90: #E3DDE8;
	--hue-mono-100: #FFFFFF;

	--hue-violet-light-3: #280040;
	--hue-violet-light-2: #500080;
	--hue-violet-light-1: #7700BF;
	--hue-violet: #9F00FF;
	--hue-violet-dark-1: #BF66FF;
	--hue-violet-dark-2: #D499FF;
	--hue-violet-dark-3: #EACCFF;
}