/* MegaFurn - design-tokens + self-hosted fonts (CLAUDE.md §7/§8: geen Google-CDN). */

/* ---- Fonts (woff2 in assets/fonts/, gedownload met `download-fonts` script) ---- */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/manrope-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/manrope-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/manrope-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/manrope-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/newsreader-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/newsreader-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/newsreader-600.woff2') format('woff2');
}

:root {
	/* Kleuren (uit ontwerp 2a "Rust") */
	--mf-bg:        #f5f3ec;
	--mf-surface:   #fdfdf8;
	--mf-alt:       #ebe9dd;
	--mf-ink:       #3a2a1b;
	--mf-ink-2:     #2f2a22;
	--mf-ink-soft:  rgba(38, 42, 28, .7);
	--mf-ink-mute:  rgba(38, 42, 28, .55);
	--mf-line:      rgba(38, 42, 28, .1);
	--mf-brown:     #7a5230;
	--mf-terra:     #d98a5a;
	--mf-terra-2:   #d9b98a;
	--mf-gold:      #f2d675;
	--mf-star:      #e8a53a;
	--mf-cream:     #e6ddcd;

	/* Typografie */
	--mf-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mf-font-head: 'Newsreader', Georgia, 'Times New Roman', serif;

	/* Ritme */
	--mf-maxw:      1320px;
	--mf-gutter:    46px;
	--mf-radius:    12px;
	--mf-radius-sm: 3px;
	--mf-shadow:    0 8px 34px rgba(0, 0, 0, .1);
	--mf-shadow-sm: 0 4px 18px rgba(38, 42, 28, .06);
}

@media (max-width: 720px) {
	:root {
		--mf-gutter: 20px;
	}
}