/**
 * Florem — Design tokens
 *
 * Alle kleuren, fonts, spacing, radii, schaduwen en transities van het theme.
 * Componenten in main.css verwijzen uitsluitend naar deze custom properties;
 * hardcoded waardes horen hier thuis en nergens anders.
 */

:root {
	/* Kleuren uit het Florem logo */
	--color-bg: #F5EFE0;              /* Warm cream achtergrond */
	--color-bg-alt: #EFE7D3;          /* Iets donkerder cream, voor secties */
	--color-bg-card: #FFFFFF;         /* Witte cards */
	--color-border: rgba(26, 43, 74, 0.12);
	--color-border-hover: rgba(26, 43, 74, 0.25);

	--color-text: #1A2B4A;            /* Marineblauw hoofdtekst */
	--color-text-muted: #5A6785;      /* Lichter marineblauw */
	--color-text-soft: #7A869C;

	--color-primary: #1A2B4A;         /* Marineblauw (primary) */
	--color-primary-dark: #0F1B34;
	--color-primary-soft: rgba(26, 43, 74, 0.08);

	--color-accent: #E4B441;          /* Oker/goud (voor CTA's) */
	--color-accent-dark: #C99A2A;
	--color-accent-soft: rgba(228, 180, 65, 0.15);

	/* Ondersteunende bloem-kleuren, spaarzaam gebruiken */
	--color-red: #C0392B;
	--color-green: #4A7C4E;
	--color-blue: #4A7BAA;

	/* Fonts */
	--font-heading: 'Lora', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Spacing */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 6rem;
	--space-2xl: 8rem;

	/* Container */
	--container-max: 1200px;
	--container-narrow: 800px;

	/* Radius */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 24px;
	--radius-pill: 100px;

	/* Shadows */
	--shadow-sm: 0 2px 8px rgba(26, 43, 74, 0.06);
	--shadow-md: 0 8px 24px rgba(26, 43, 74, 0.08);
	--shadow-lg: 0 20px 50px rgba(26, 43, 74, 0.12);

	/* Transitions */
	--ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* Layout — hoogte van de sticky header, gebruikt voor scroll-offsets */
	--header-height: 84px;
}

@media (max-width: 900px) {
	:root {
		--header-height: 72px;
	}
}