/* ==========================================================================
   GLOBAL — tokens, reset, base, helpers
   Tokens 1:1 uit concept-files/style.css :root
   ==========================================================================
   z-index schaal (documenteer hier, raad nooit):
     announce/nav (sticky header) ... 50
     dropdowns/tooltips ............. 500
     search backdrop ............... 9998
     search panel .................. 10000
     header while search open ...... 10001
     side cart backdrop + panel .... 10100
     toast/notice .................. 11000
   ========================================================================== */

:root {
	/* Bolletoet palette */
	--bg: #f8f3eb;
	--bg-deep: #d8c4a8;
	--surface: #f6ece0;
	--ink: #5a4536;
	--ink-soft: #8a7263;
	--ink-mute: #b0998a;
	--line: #d8c9b4;

	--rose: #c89c95;
	--terracotta: #c08570;
	--sage: #9ba98a;
	--mauve: #b8a8a5;
	--cream: #f6ece0;

	--accent: var(--terracotta);

	--font-heading: 'Jost', sans-serif;
	--font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

	--gutter: clamp(1.2rem, 4vw, 3rem);
	--max: 1360px;
}

*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body { background: var(--bg); color: var(--ink); }

body {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }

/* Container helper. .wrap = mockup-alias zodat verbatim shortcode-markup werkt. */
.wrap, .bt-wrap {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* Visueel verbergen maar wel in DOM (WC variatie-selects). */
.bt-visually-hidden {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Skip link */
.bt-skip {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--ink);
	color: var(--cream);
	padding: 0.6rem 1rem;
	z-index: 11000;
}
.bt-skip:focus { left: 0; }