/* Goedkoopste — global design tokens + base.
   Section styling lives in the goedkoopste-blocks plugin (scoped to .gk-*).
   This file only sets site-wide tokens, typography defaults and a11y basics. */

:root {
	/* Brand palette (sampled from the IPTVV reference) — muted teal + gold + dark navy */
	--gk-blue: #3A8488;        /* primary teal: buttons, eyebrows, icons, checks, links */
	--gk-blue-ink: #2E6A6D;    /* darker teal: hovers */
	--gk-blue-dark: #24585B;   /* deepest teal */
	--gk-gold: #D7BF95;        /* secondary gold: featured banner, eyebrow rule */
	--gk-ink: #0D1F2C;         /* dark navy: dark sections, featured card, dark text */
	--gk-black: #081019;
	--gk-paper: #F2F9F9;       /* pale cool off-white */
	--gk-white: #FFFFFF;
	--gk-muted: #5B6472;
	--gk-muted-dark: rgba(255, 255, 255, 0.72);
	--gk-line: #DCE6E6;
	--gk-line-dark: rgba(255, 255, 255, 0.12);

	/* Type */
	--gk-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Layout */
	--gk-container: 1240px;
	--gk-radius: 8px;
}

body {
	font-family: var(--gk-font);
	color: var(--gk-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Keyboard a11y: always-visible focus ring (Playbook §5) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--gk-blue);
	outline-offset: 2px;
}

::selection {
	background: var(--gk-blue);
	color: #fff;
}

/* Respect reduced-motion globally (Playbook §5) */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Media never forces horizontal overflow (Playbook §3/§7) */
img,
svg,
video {
	max-width: 100%;
	height: auto;
}