@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap');

.aegis {
	--font-size: 14px;

	background: var(--color-body);
	color: var(--color-font-primary);
	font-family: var(--sans-serif-font);
	font-size: var(--font-size);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/*
	 * Typo
	 */
	--sans-serif-font: 'Inter var', -apple-system, BlinkMacSystemFont,
		sans-serif;
	--key-font: 'DM Sans', apple-system, BlinkMacSystemFont, sans-serif;

	--size-font-sm: 0.875rem;

	/*
	 * Colors
	 */
	--color-font-primary: rgb(238, 245, 255);
	--color-font-secondary: rgba(238, 245, 255, 0.6);
	--color-font-tertiary: rgba(238, 245, 255, 0.25);

	--color-font-link: rgba(238, 245, 255, 0.3);
	--color-font-link-hover: rgba(238, 245, 255, 0.8);

	--color-body: rgb(32, 34, 37); //
	--color-background: rgb(41, 43, 47); //
	--color-foreground: rgb(54, 57, 63); //

	--color-primary: rgb(248, 224, 176);
	--color-green: rgb(36, 161, 109);
	--color-lightgreen: rgb(141, 221, 122);
	--color-lavender: rgb(136, 107, 214);
	--color-red: rgb(185, 66, 66);
	--color-orange: rgb(231, 172, 62);

	// Building icons
	--color-building-economic: radial-gradient(
		100% 100% at 50.51% 0%,
		var(--color-foreground) 0%,
		var(--color-background) 100%
	);
	--color-building-military: radial-gradient(
		100% 100% at 50.51% 0%,
		#96644a 0%,
		#734126 100%
	);
	--color-building-fort: var(--color-building-economic);
	--color-building-research: radial-gradient(
		100% 100% at 50.51% 0%,
		#53c2ac 0%,
		#2b7865 100%
	);

	/*
	 * Layout
	 */

	--layout-max-width: 600px;

	--horizontal-gap: 1rem;
	--vertical-gap: 2rem;

	--border-radius: 0.5rem;
	--border-radius-sm: 0.25rem;
	--border-radius-lg: 0.75rem;
}

@media (min-width: 769px) {
	.aegis {
		--font-size: 16px;
	}
}
