/**
 * Textielhuis — huisstijl (fonts + design tokens).
 *
 * Fonts worden LOKAAL gehost (geen Google Fonts CDN): Libre Franklin (body) en
 * Poppins (koppen), conform de live site en de Figma-typografie. Libre Franklin is
 * een variabel font (één bestand dekt alle gewichten); Poppins is statisch per gewicht.
 *
 * Kleur-/typografietokens staan hier op één plek (de bron). Layout/structuur in
 * layout.css en gescopede pagina-CSS bouwen hierop voort.
 */

/* ---- Libre Franklin (variabel, body) ---- */
@font-face {
	font-family: "Libre Franklin";
	src: url("../fonts/LibreFranklin-400.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* ---- Poppins (statisch, koppen) ---- */
@font-face {
	font-family: "Poppins";
	src: url("../fonts/Poppins-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("../fonts/Poppins-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("../fonts/Poppins-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("../fonts/Poppins-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Typografie */
	--th-font-body: "Libre Franklin", Helvetica, Arial, "Lucida Grande", sans-serif;
	--th-font-heading: "Poppins", "Libre Franklin", Helvetica, Arial, sans-serif;
	/* Aliassen die de core/setup-conventie verwacht */
	--sellabees-font-body: var(--th-font-body);
	--sellabees-font-heading: var(--th-font-heading);

	/* Kleuren (uitgelezen uit de Figma; uitgebreid per scherm tijdens de bouw) */
	--th-dark: #212121;          /* footer/donkere secties */
	--th-heading-light: #f5f5f5; /* koppen op donker */
	--th-gold: #cfa959;          /* accent (locatielabels, pins) */
	--th-white: #ffffff;
	--th-text: #212121;          /* body-tekst op licht */

	/* Core-accent (cart-spinner/preloader): voorlopig op het goud-accent;
	   wordt bijgesteld zodra de primaire merkkleur uit header/home bekend is. */
	--sellabees-red: var(--th-gold);
}

body {
	font-family: var(--th-font-body);
	color: var(--th-text);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--th-font-heading);
}

/* --------------------------------------------------------------------------
   Laadscherm-logo: op shop-/archiefpagina's (body.woocommerce) wint
   WooCommerce's ".woocommerce img { max-width:100% }" (specificiteit 0,1,1)
   van de core-regel ".sellabees-preloader__logo { max-width:200px }" (0,1,0),
   waardoor het logo naar ware grootte (1025px) opblies. Hogere specificiteit
   (0,2,0) + harde hoogte-cap houden het laadscherm-logo overal even groot.
   -------------------------------------------------------------------------- */
.sellabees-preloader .sellabees-preloader__logo {
	width: auto;
	max-width: 200px;
	max-height: 56px;
	height: auto;
}
@media (max-width: 600px) {
	.sellabees-preloader .sellabees-preloader__logo {
		max-width: 60vw;
	}
}