/* ============================================================================
   AI Consultancy Bureau — Shared brand CSS (v1)
   Wordt geïncludeerd door alle templates en sites. Eén bron van waarheid voor
   kleur, typografie en componentstijlen.
   ----------------------------------------------------------------------------
   Compliance-baseline:
   - WCAG 2.1 AA: alle tekst-kleurparen hebben contrast ≥ 4.5:1
   - Print-vriendelijk: page-break controle ingebouwd
   ============================================================================ */

:root {
	/* Brand-kleuren (donker → licht) */
	--bureau-blauw-900: #0f2655;   /* diepst, voor hero-backgrounds */
	--bureau-blauw-700: #1a3c6e;   /* primaire heading, header-bg */
	--bureau-blauw-500: #2563eb;   /* accent, links, knoppen */
	--bureau-blauw-100: #e0eaff;   /* lichte achtergronden */
	--bureau-blauw-050: #f0f4ff;   /* zachte cards */

	/* Status-kleuren — WCAG AA gecheckt op witte tekst */
	--bureau-groen:   #15803d;   /* contrast wit 5.0:1 ✓ */
	--bureau-rood:    #b91c1c;   /* contrast wit 6.0:1 ✓ */
	--bureau-oranje:  #c2410c;   /* contrast wit 5.4:1 ✓ */

	/* Neutrale grijstinten */
	--bureau-tekst:   #0f172a;
	--bureau-grijs-700: #334155;
	--bureau-grijs-500: #64748b;
	--bureau-grijs-300: #cbd5e1;
	--bureau-grijs-100: #f1f5f9;
	--bureau-wit:     #ffffff;

	/* Typografie */
	--bureau-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
	                    "Helvetica Neue", Arial, sans-serif;
	--bureau-font-mono: "SF Mono", Menlo, Consolas, monospace;

	/* Spacing scale (4-px ritme) */
	--bureau-sp-1: 4px;
	--bureau-sp-2: 8px;
	--bureau-sp-3: 12px;
	--bureau-sp-4: 16px;
	--bureau-sp-6: 24px;
	--bureau-sp-8: 32px;
	--bureau-sp-12: 48px;

	/* Radius */
	--bureau-radius-sm: 4px;
	--bureau-radius-md: 8px;
	--bureau-radius-lg: 12px;

	/* Schaduw */
	--bureau-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
	--bureau-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.10);
}

/* ----------------------------------------------------------------------------
   Reset + basis
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: var(--bureau-font-sans);
	color: var(--bureau-tekst);
	font-size: 14px;
	line-height: 1.6;
	background: #f8fafc;
}

/* Alleen visueel, behoudt screen-reader content */
.bureau-sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); border: 0;
}

/* Skip-link — WCAG vereiste voor toetsenbord-gebruikers */
.bureau-skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--bureau-blauw-700); color: var(--bureau-wit);
	padding: var(--bureau-sp-3) var(--bureau-sp-4);
	z-index: 1000; text-decoration: none;
}
.bureau-skip-link:focus { left: 0; }

/* Focus-state — duidelijk zichtbaar voor toetsenbord-navigatie */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--bureau-blauw-500);
	outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   Componenten
   ---------------------------------------------------------------------------- */
.bureau-badge {
	display: inline-block;
	background: var(--bureau-blauw-500);
	color: var(--bureau-wit);
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.bureau-chip-hoog   { background: var(--bureau-rood);   color: var(--bureau-wit); padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: bold; }
.bureau-chip-midden { background: var(--bureau-oranje); color: var(--bureau-wit); padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: bold; }
.bureau-chip-laag   { background: var(--bureau-groen);  color: var(--bureau-wit); padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: bold; }

/* AI-content marker — AI Act art. 50 transparantie */
.bureau-ai-marker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--bureau-grijs-500);
	background: var(--bureau-grijs-100);
	padding: 4px 10px;
	border-radius: 12px;
	border-left: 3px solid var(--bureau-blauw-500);
}
.bureau-ai-marker::before { content: "🤖"; }

/* ----------------------------------------------------------------------------
   Print-defaults
   ---------------------------------------------------------------------------- */
@media print {
	body { background: var(--bureau-wit); }
	.bureau-no-print { display: none !important; }

	/* Voorkom dat blokken middendoor breken op pagina-overgang */
	h1, h2, h3 { break-after: avoid; }
	.bureau-aanbeveling,
	.bureau-kwartaal,
	tr { break-inside: avoid; }

	/* Standaard A4-marges */
	@page { size: A4; margin: 18mm 16mm; }
}