:root {

	/* Hue Values */
	--hue-primary: 180;
	--hue-secondary: 40;

	/* Gradients */
	--linear-gradient_card: linear-gradient(
		135deg,
		hsl(var(--hue-primary), 100%, 10%) 0%,
		hsl(var(--hue-secondary), 100%, 8%) 100%
	);
	--linear-gradient_border: linear-gradient(
		135deg,
		hsl(var(--hue-secondary), 100%, 17%) 0%,
		hsl(var(--hue-primary), 100%, 15%) 100%
	);
	--linear-gradient_text: linear-gradient(
		90deg,
		hsl(var(--hue-primary), 90%, 60%) 0%,
		hsl(var(--hue-secondary), 90%, 55%) 100%
	);

	/* Background & Overlay */
	--color-bg: hsl(var(--hue-primary), 15%, 5%);
	--color-overlay: hsla(var(--hue-primary), 15%, 5%, 0.85);

	/* Text Colors */
	--color-text_high: hsl(var(--hue-primary), 5%, 90%);
	--color-text_medium: hsl(var(--hue-primary), 15%, 65%);
	--color-text_low: hsl(var(--hue-primary), 16%, 40%);

	/* Shadow Colors */
	--color-primary_shadow: hsl(var(--hue-primary), 100%, 10%);
	--color-secondary_shadow: hsl(var(--hue-secondary), 100%, 8%);

	--color-primary: hsl(var(--hue-primary), 90%, 55%);
	--color-secondary: hsl(var(--hue-secondary), 90%, 55%);

	--radial-gradient_hero: radial-gradient(
		circle at center,
		hsl(var(--hue-primary), 70%, 30%) 30%,
		/* A warm orange */ hsl(var(--hue-primary), 100%, 20%) 30%,
		/* A bright green */ hsl(var(--hue-primary), 100%, 20%) 40%,
		hsl(var(--hue-primary), 100%, 10%) 40%,
		/* A cool blue */ hsl(var(--hue-primary), 100%, 10%) 60%,
		hsl(var(--hue-primary), 100%, 5%) 60%,
		/* A vibrant purple */ hsl(var(--hue-primary), 100%, 5%) 80%
	);

	--nav-height: 4rem;
	--bottom-nav-height: 5rem;
	--inline-padding: 1.5rem;
}