:root {
	color-scheme: light dark;

	/* Colors - Light mode (epicflare ember) */
	--color-primary: #f47c00;
	--color-primary-hover: #e26c00;
	--color-primary-active: #c85a00;
	--color-on-primary: #120b08;
	--color-primary-text: #b04700;
	--color-background: #f6f6f8;
	--color-surface: #ececf1;
	--color-text: #2f2f34;
	--color-text-muted: #676770;
	--color-border: #d7d7df;

	/* Typography */
	--font-family: system-ui, sans-serif;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 2rem;
	--font-size-2xl: 3rem;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-2xl: 3rem;

	/* Border radius */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	--radius-full: 999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg:
		0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-normal: 0.2s ease;

	/* Responsive spacing - used for page-level padding */
	--spacing-page: var(--spacing-2xl);
	--spacing-section: var(--spacing-xl);
	--spacing-header: var(--spacing-xl);
}

/* Tablet responsive overrides */
@media (max-width: 1024px) {
	:root {
		--spacing-page: var(--spacing-xl);
		--spacing-section: var(--spacing-lg);
		--spacing-header: var(--spacing-lg);
	}
}

/* Mobile responsive overrides */
@media (max-width: 640px) {
	:root {
		--spacing-page: var(--spacing-md);
		--spacing-section: var(--spacing-md);
		--spacing-header: var(--spacing-md);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Colors - Dark mode (smoldering ember) */
		--color-primary: #f6a23a;
		--color-primary-hover: #f08b1a;
		--color-primary-active: #d87305;
		--color-on-primary: #120b08;
		--color-primary-text: #f6a23a;
		--color-background: #121216;
		--color-surface: #1c1c22;
		--color-text: #f1f1f5;
		--color-text-muted: #b3b3bd;
		--color-border: #2b2b33;

		/* Dark mode shadows - lighter for visibility */
		--shadow-sm: 0 1px 2px 0 rgb(255 255 255 / 0.05);
		--shadow-md:
			0 4px 6px -1px rgb(255 255 255 / 0.08),
			0 2px 4px -2px rgb(255 255 255 / 0.08);
		--shadow-lg:
			0 10px 15px -3px rgb(255 255 255 / 0.1),
			0 4px 6px -4px rgb(255 255 255 / 0.1);
	}
}

/* Reset and base styles */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: 1.5;
	color: var(--color-text);
	background-color: var(--color-background);
}

#root {
	min-height: 100vh;
}

.app-shell {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-spinner {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 4px solid color-mix(in srgb, var(--color-border) 70%, transparent);
	border-top-color: var(--color-primary);
	opacity: 0;
	animation:
		spinner-fade-in 0.2s ease 120ms forwards,
		spinner-spin 0.9s linear 120ms infinite;
}

@keyframes spinner-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes spinner-fade-in {
	to {
		opacity: 1;
	}
}