/* =========================================================================
   HENK BOVEE HORST – DESIGN TOKENS (het "sausje" op MM Basis)
   -------------------------------------------------------------------------
   Huisstijl uit de briefing en het ontwerp:
   rood #E02A30 · donkerrood #480C0B · zwart #0C0A00 · crème #FDF1EA
   Font: Google Sans Flex (9pt-optiek) – SemiBold koppen, Regular tekst.

   Let op: dit is een DONKERE site. De MM-achtergrondkeuzes betekenen hier:
     "white" (Wit)        → zwart  #0C0A00 (de basis van de pagina)
     "grey"  (Lichtgrijs) → crème  #FDF1EA (als afgerond paneel)
     "dark"  (Donker)     → donkerrood #480C0B
   In de backend heten de keuzes daarom Zwart / Crème (paneel) / Donkerrood
   (inc/config.php → background_labels). Overrides die tokens niet dekken: client.css.
   ========================================================================= */

/* ---------- Lettertype: Google Sans Flex (variabel: gewicht + optische grootte), zelf gehost ---------- */
@font-face {
	font-family: "Google Sans Flex";
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url("../fonts/google-sans-flex-latin-opsz-normal.woff2") format("woff2-variations"), url("../fonts/google-sans-flex-latin-opsz-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* ---------- Huisstijlkleuren Henk Bovee Horst ---------- */
	--hbh-red: #E02A30;
	--hbh-darkred: #480C0B;
	--hbh-black: #0C0A00;
	--hbh-cream: #FDF1EA;
	--hbh-red-text: #F3545A;         /* rood voor KLEINE tekst op donker (contrast 4.7:1); #E02A30 haalt daar 3.4:1 */
	--hbh-cream-muted: #F1E1D9;      /* iets gedempte crème voor lopende tekst op donker */
	--hbh-line: rgba(253, 241, 234, .28); /* lijnen op donker */
	--hbh-star: #D7B4AF;             /* sterren in reviews */

	/* ---------- Merkkleuren (MM-tokens) ---------- */
	--mm-accent: var(--hbh-red);
	--mm-accent-dark: #C41F25;
	--mm-accent-contrast: var(--hbh-cream);
	--mm-ink: var(--hbh-black);
	--mm-black: var(--hbh-cream);    /* "standaard tekstkleur" = crème: de site is donker */
	--mm-grey: var(--hbh-cream-muted);
	--mm-grey-mid: var(--hbh-cream); /* randen van formuliervelden */
	--mm-grey-light: #3a2a26;        /* lijnen, placeholders op donker */
	--mm-grey-bg: var(--hbh-cream);  /* "lichtgrijze" sectie = crème paneel */
	--mm-white: var(--hbh-black);    /* "witte" sectie = zwart (basis van de pagina) */
	--mm-surface-dark: var(--hbh-darkred);

	/* ---------- Per element ---------- */
	--mm-btn-bg: var(--hbh-red);
	--mm-btn-text: var(--hbh-cream);
	--mm-btn-bg-hover: #C41F25;
	--mm-link: var(--hbh-red-text);   /* links in lopende tekst: lichter rood voor contrast op donker */
	--mm-heading: var(--hbh-cream);
	--mm-footer-bg: var(--hbh-darkred);
	--mm-footer-text: var(--hbh-cream);

	/* Semantisch */
	--mm-text: var(--hbh-cream);
	--mm-text-muted: var(--hbh-cream-muted);
	--mm-bg: var(--hbh-black);
	--mm-line: var(--hbh-line);
	--mm-success: #1f8a4c;
	--mm-error: var(--hbh-red);

	/* ---------- Typografie ---------- */
	--mm-font: "Google Sans Flex", "Google Sans", "Helvetica Neue", Arial, sans-serif;
	--mm-font-heading: var(--mm-font);
	--mm-font-variation: "opsz" 9;   /* "Google Sans Flex 9pt" uit het ontwerp */
	--mm-heading-weight: 600;
	--mm-heading-weight-h1: 600;
	--mm-heading-tracking: -0.005em;
	--mm-fs-xs: 0.8125rem;
	--mm-fs-sm: 0.875rem;
	--mm-fs-base: 1rem;
	--mm-fs-md: 1.0625rem;
	--mm-fs-h3: clamp(1.375rem, 1.1rem + 0.9vw, 2rem);
	--mm-fs-h2: clamp(2rem, 1.2rem + 3vw, 3.75rem);
	--mm-fs-h1: clamp(2.5rem, 1.4rem + 4.2vw, 5rem);
	--mm-fs-title: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem); /* titels in afbeelding + tekst */
	--mm-lh: 1.85;
	--mm-kicker-tracking: 0.12em;
	--mm-kicker-transform: uppercase;

	/* ---------- Layout & vorm ---------- */
	--mm-container: 1140px;
	--mm-container-wide: 1280px;     /* header en panelen */
	--mm-gutter: clamp(1rem, 4vw, 2.5rem);
	--mm-section: clamp(3.5rem, 5vw + 1.5rem, 7.5rem);
	--mm-gap: clamp(1rem, 2vw, 1.75rem);
	--mm-radius: 1rem;               /* licht afgerond */
	--mm-radius-panel: 1.25rem;
	--mm-radius-btn: 999px;          /* pilvormige knoppen */
	--mm-skew: 0deg;
	--mm-cut: 0px;
	--mm-collage-tilt: -8deg;        /* scheve foto in collages */
	--mm-shadow: 0 18px 40px rgba(0, 0, 0, .28);
	--mm-ease: cubic-bezier(.2, .7, .2, 1);

	/* ---------- Hero ---------- */
	--mm-hero-overlay: linear-gradient(90deg, rgba(12, 10, 0, .62) 0%, rgba(12, 10, 0, .42) 55%, rgba(12, 10, 0, .3) 100%);
	--mm-hero-glow: radial-gradient(closest-side, rgba(224, 42, 48, .16), transparent 70%);

	/* ---------- Header (ligt transparant over de hero) ---------- */
	--mm-header-bg: transparent;
	--mm-header-bg-scrolled: var(--hbh-darkred);
	--mm-header-height: 5.5rem;
	--mm-logo-height: clamp(2rem, 1.2rem + 1.6vw, 2.9rem);

	/* ---------- Topmenu ---------- */
	--mm-topbar-bg: var(--hbh-darkred);
	--mm-topbar-color: var(--hbh-cream);
	--mm-topbar-height: 2.875rem;
}

@media (max-width: 1024px) {
	:root { --mm-header-height: 4.5rem; }
}