/* CSS Custom Properties (Variables) */

:root {
	/* Colors - based on tagstyringen.dk */
	--color-body-bg: #F2F1EF;
	--color-body-text: #282828;
	--color-heading-text: #222222;
	--color-hero-text: #FFFFFF;
	--color-link: #234923;
	--color-link-hover: #2C622C;
	--color-footer-bg: #003C58;
	--color-footer-text: #FFFFFF;
	--color-accent-yellow: #FFD22E;
	--color-accent-blue: #5DBED1;
	--color-button-bg: #F6F6F6;
	--color-button-text: rgb(16 16 16 / 0.3);
	--color-input-border: #282828;
	--color-white: #FFFFFF;
	--color-black: #000000;
	--color-placeholder: #888888;
	--color-label: #282828;

	/* Typography - based on tagstyringen.dk */
	--font-family: 'Roboto', sans-serif;
	--font-size-base: 16px;
	--font-size-h1: 64px;
	--font-size-h2: 40px;
	--font-size-h3: 28px;
	--font-size-h4: 20px;
	--font-size-body: 16px;
	--font-size-small: 14px;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;
	--font-weight-extra-bold: 800;
	--line-height-base: 1.5;
	--line-height-heading: 1.3;

	/* Spacing (8px grid system) */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 40px;
	--space-6: 48px;

	/* Shadows - minimalist flat design */
	--shadow-sm: none;
	--shadow-md: none;
	--shadow-lg: none;

	/* Borders */
	--border-width: 1px;
	--border-radius: 0px;

	/* Layout */
	--header-height: 140px;
	--container-max-width: 1200px;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 350ms ease;
}

@media (width <= 768px) {
	:root {
		--font-size-h1: 40px;
	}
}

/* Dark mode support (automatic with light-dark()) */
@media (prefers-color-scheme: dark) {
	:root {
		/* Colors automatically adjust with light-dark() */
		--color-text-base: light-dark(#001F4F, #E0E0E0);
	}
}