@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
	--ng-bg: #f4f7fb;
	--ng-bg-card: #ffffff;
	--ng-accent: #2181df;
	--ng-accent-hover: #1a6fc4;
	--ng-text: #0f2744;
	--ng-text-muted: #4b6480;
	--ng-border: #d5e4f4;
	--ng-success: #1f9d55;
	--ng-error: #d64545;
	--ng-gold: #e0b15a;
	--ng-on-accent: #ffffff;
	--ng-overlay: rgba(15, 39, 68, 0.08);

	--ng-space-xs: 4px;
	--ng-space-sm: 8px;
	--ng-space-md: 16px;
	--ng-space-lg: 24px;
	--ng-space-xl: 32px;
	--ng-space-2xl: 48px;

	--ng-font-family: 'DM Sans', Inter, system-ui, sans-serif;
	--ng-font-size-sm: 0.875rem;
	--ng-font-size-base: 1rem;
	--ng-font-size-lg: 1.25rem;
	--ng-font-size-xl: 1.5rem;
	--ng-font-size-2xl: 2rem;
	--ng-line-height: 1.5;

	--ng-radius: 12px;
	--ng-radius-pill: 9999px;
	--ng-shadow-sm: 0 1px 3px rgba(15, 39, 68, 0.08);
	--ng-shadow-md: 0 8px 24px rgba(33, 129, 223, 0.12);
	--ng-shadow-lg: 0 16px 40px rgba(15, 39, 68, 0.12);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}