/*
 * Bouwrestjes — base layer
 *
 * Tokens, reset, typografie, utilities.
 * Design-system: Marketplace / Trust & Warmth — UI/UX Pro Max guided.
 */

/* =====================================================
   Design tokens
   ===================================================== */
:root {
	/* ---- Color — warm, trustworthy marketplace ------- */
	--br-primary-50:   #FDF1E9;
	--br-primary-100:  #FADCC6;
	--br-primary-300:  #ED9162;
	--br-primary:      #D86A3A;
	--br-primary-600:  #C4582D;
	--br-primary-700:  #A44621;
	--br-primary-900:  #5A2914;

	--br-accent:       #2E7D5B;  /* forest green — trust */
	--br-accent-soft:  #E0EFE6;
	--br-accent-ink:   #154A31;

	--br-warning:      #C48A17;
	--br-warning-soft: #FBEDD0;
	--br-danger:       #B8332F;
	--br-danger-soft:  #FCE1DF;
	--br-success:      #2E7D5B;
	--br-success-soft: #E0EFE6;

	/* ---- Neutrals (warm-tinted grayscale) ------------- */
	--br-ink:          #1B1410;
	--br-ink-1:        #2D2520;
	--br-ink-2:        #55463C;
	--br-ink-3:        #857468;
	--br-ink-4:        #B4A89D;

	--br-surface:      #FFFFFF;
	--br-surface-alt:  #FBF7F1;   /* card alt background */
	--br-bg:           #FAF5EE;   /* page background */
	--br-bg-2:         #F5ECDF;   /* soft sections */

	--br-border:       #ECE1D0;
	--br-border-2:     #D9C9B2;

	/* ---- Typography ---------------------------------- */
		--br-font-sans:    'Avenir Next', 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
		--br-font-display: 'Trebuchet MS', 'Avenir Next', 'Segoe UI Variable', 'Segoe UI', Helvetica, Arial, sans-serif;

	--br-fs-xs:   0.75rem;   /* 12 */
	--br-fs-sm:   0.875rem;  /* 14 */
	--br-fs-base: 1rem;      /* 16 */
	--br-fs-md:   1.125rem;  /* 18 */
	--br-fs-lg:   1.25rem;   /* 20 */
	--br-fs-xl:   1.5rem;    /* 24 */
	--br-fs-2xl:  1.875rem;  /* 30 */
	--br-fs-3xl:  2.25rem;   /* 36 */
	--br-fs-4xl:  3rem;      /* 48 */
	--br-fs-5xl:  3.75rem;   /* 60 */

	--br-lh-tight: 1.15;
	--br-lh-snug:  1.35;
	--br-lh-body:  1.6;
	--br-lh-loose: 1.75;

	/* ---- Spacing (4pt grid) --------------------------- */
	--br-sp-1:  0.25rem;   /* 4  */
	--br-sp-2:  0.5rem;    /* 8  */
	--br-sp-3:  0.75rem;   /* 12 */
	--br-sp-4:  1rem;      /* 16 */
	--br-sp-5:  1.5rem;    /* 24 */
	--br-sp-6:  2rem;      /* 32 */
	--br-sp-7:  3rem;      /* 48 */
	--br-sp-8:  4rem;      /* 64 */
	--br-sp-9:  6rem;      /* 96 */

	/* ---- Radius -------------------------------------- */
	/* Scherpe hoeken overal — alle radius-tokens op 0.
	   Zet terug naar 8/14/22/32/999px om de "soft" variant te herstellen. */
	--br-radius-sm: 0;
	--br-radius-md: 0;
	--br-radius-lg: 0;
	--br-radius-xl: 0;
	--br-radius-pill: 0;

	/* ---- Shadows (layered, warm) --------------------- */
	--br-shadow-xs: 0 1px 2px rgba(27, 20, 16, 0.05);
	--br-shadow-sm: 0 2px 4px rgba(27, 20, 16, 0.06), 0 1px 2px rgba(27, 20, 16, 0.04);
	--br-shadow-md: 0 8px 20px rgba(27, 20, 16, 0.08), 0 2px 4px rgba(27, 20, 16, 0.04);
	--br-shadow-lg: 0 18px 40px rgba(27, 20, 16, 0.12), 0 4px 8px rgba(27, 20, 16, 0.05);
	--br-shadow-xl: 0 32px 64px rgba(27, 20, 16, 0.18), 0 8px 16px rgba(27, 20, 16, 0.07);

	--br-focus: 0 0 0 3px rgba(216, 106, 58, 0.28);

	/* ---- Layout -------------------------------------- */
	--br-container: 1200px;
	--br-container-narrow: 720px;
	--br-container-wide: 1440px;

	/* ---- Motion -------------------------------------- */
	--br-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
	--br-ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
	--br-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--br-t-fast:   150ms;
	--br-t-base:   220ms;
	--br-t-slow:   340ms;

	/* Gedeelde horizontal gutter voor ALLE edge-aware containers
	   (header-inner, site-main, home-blocks, hero, footer-inner).
	   Eén variabele = één waarheid, voorkomt misalignment tussen
	   homepage en subpagina's. */
	--br-gutter: 1rem;    /* 16px op mobiel */
}

@media (min-width: 768px) {
	:root { --br-gutter: 1.5rem; }  /* 24px op desktop */
}

/* =====================================================
   Reset & globals
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--br-font-sans);
	font-size: var(--br-fs-base);
	line-height: var(--br-lh-body);
	color: var(--br-ink-1);
	/* Zelfde visuele taal als de hero: warme radial-gradient rechtsboven,
	   groene hint linksonder, subtiele dotted texture. Zo voelt elke
	   subpagina deel van dezelfde wereld als de homepage. */
	background-color: var(--br-bg);
	background-image:
		radial-gradient(60% 50% at 92% 8%,  rgba(237, 145, 98, 0.18) 0%, transparent 60%),
		radial-gradient(55% 60% at 5% 95%,  rgba(46, 125, 91, 0.10)  0%, transparent 60%),
		radial-gradient(rgba(27, 20, 16, 0.035) 1px, transparent 1px);
	background-size: auto, auto, 22px 22px;
	background-repeat: no-repeat, no-repeat, repeat;
	background-attachment: fixed, fixed, fixed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
	color: var(--br-primary-700);
	text-decoration: none;
	transition: color var(--br-t-fast) var(--br-ease-out);
}
a:hover { color: var(--br-primary); }
a:focus-visible { outline: none; box-shadow: var(--br-focus); border-radius: var(--br-radius-sm); }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--br-sp-3) 0;
	font-family: var(--br-font-display);
	font-weight: 700;
	line-height: var(--br-lh-tight);
	color: var(--br-ink);
	letter-spacing: -0.01em;
}
h1 { font-size: var(--br-fs-3xl); letter-spacing: -0.025em; }
h2 { font-size: var(--br-fs-2xl); letter-spacing: -0.02em; }
h3 { font-size: var(--br-fs-xl); }
h4 { font-size: var(--br-fs-lg); }

p { margin: 0 0 var(--br-sp-4) 0; color: var(--br-ink-2); }
strong, b { font-weight: 600; color: var(--br-ink); }

ul, ol { margin: 0 0 var(--br-sp-4) 0; padding-left: 1.25rem; }
hr { border: 0; border-top: 1px solid var(--br-border); margin: var(--br-sp-6) 0; }

button, input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

button { cursor: pointer; background: none; border: 0; padding: 0; }

::selection { background: var(--br-primary-100); color: var(--br-primary-900); }

:focus-visible {
	outline: none;
	box-shadow: var(--br-focus);
	border-radius: var(--br-radius-sm);
}

/* =====================================================
   Utilities
   ===================================================== */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute; width: 1px;
}

.skip-link {
	position: absolute; top: -100px; left: 0;
	background: var(--br-ink); color: #fff;
	padding: var(--br-sp-3) var(--br-sp-4);
	z-index: 1000; font-weight: 600;
}
.skip-link:focus { top: 0; }

[hidden] { display: none !important; }

.is-loading { opacity: 0.5; pointer-events: none; transition: opacity var(--br-t-base); position: relative; }
.is-loading::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(216,106,58,0.05) 50%, transparent 100%);
	background-size: 200% 100%;
	animation: br-shimmer 1.2s infinite;
	pointer-events: none;
}
@keyframes br-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.text-accent { color: var(--br-primary); }

/* Prefer reduced motion respect */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Typography scale up at desktop */
@media (min-width: 768px) {
	h1 { font-size: var(--br-fs-4xl); }
	h2 { font-size: var(--br-fs-3xl); }
	h3 { font-size: var(--br-fs-2xl); }
}
@media (min-width: 1024px) {
	h1 { font-size: var(--br-fs-5xl); }
}