/* =========================================================================
   WEKO FARM EQUIPMENT – DESIGN TOKENS (MM Basis)
   -------------------------------------------------------------------------
   Huisstijl volgens de briefing en het ontwerp (04-ontwerp-website.png):
   donkerblauw #202644, geel #E7B059, Helvetica Neue (Adobe Fonts-kit jup3iyd).
   main.css gebruikt uitsluitend deze variabelen; wat tokens niet dekken staat in client.css.
   ========================================================================= */

/* ---------- Lettertypen ----------
   Helvetica Neue komt uit de Adobe Fonts-kit (Customizer → Site-instellingen → Koppelingen;
   standaard 'jup3iyd' uit inc/config.php). Adobe staat zelf hosten niet toe, dus geen @font-face hier.
   Controleer in Adobe Fonts → Webprojecten de CSS-naam van de familie in de kit en zet die vooraan
   in --mm-font als die afwijkt van "helvetica-neue-lt-pro". Zonder kit: systeem-Helvetica/Arial. */

:root {
	/* ---------- Merkkleuren ---------- */
	--mm-accent: #e7b059;            /* geel: knoppen, kickers, iconen, topbalk */
	--mm-accent-dark: #d99a3d;       /* hover-variant van het geel */
	--mm-accent-contrast: #202644;   /* tekst óp geel (donkerblauw; wit haalt het contrast niet) */
	--mm-ink: #202644;               /* donkerblauw: koppen, footer */
	--mm-black: #202644;             /* standaard tekstkleur (donkerblauw) */
	--mm-grey: #3d4262;              /* secundaire tekst (≥ 4.5:1 op wit én op geel) */
	--mm-grey-mid: #9aa0b8;          /* randen van formuliervelden */
	--mm-grey-light: #e3e5ee;        /* lijnen, placeholders */
	--mm-grey-bg: #e7b059;           /* "lichte sectie" = gele sectie (briefing: lichte secties #E7B059) */
	--mm-white: #ffffff;
	--mm-surface-dark: #202644;      /* donkere secties (hero, over ons, USP's, CTA) */
	--mm-surface-darker: #1a1e36;    /* WEKO: iets donkerder vlak achter de referenties (client.css) */

	/* ---------- Per element ---------- */
	--mm-btn-bg: var(--mm-accent);            /* gele knop … */
	--mm-btn-text: var(--mm-ink);             /* … met donkerblauwe tekst */
	--mm-btn-bg-hover: var(--mm-accent-dark);
	--mm-link: #e7b059;                       /* briefing: links in tekst geel (op lichte vlakken: zie client.css) */
	--mm-heading: var(--mm-ink);
	--mm-footer-bg: #202644;
	--mm-footer-text: #ffffff;

	/* Semantisch */
	--mm-text: var(--mm-black);
	--mm-text-muted: var(--mm-grey);
	--mm-bg: var(--mm-white);
	--mm-line: var(--mm-grey-light);
	--mm-success: #1f8a4c;
	--mm-error: #c62828;

	/* ---------- Typografie ---------- */
	--mm-font: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--mm-font-heading: var(--mm-font);
	--mm-heading-weight: 700;
	--mm-heading-weight-h1: 700;
	--mm-heading-tracking: -0.01em;
	--mm-fs-xs: 0.8125rem;
	--mm-fs-sm: 0.9375rem;
	--mm-fs-base: 1rem;
	--mm-fs-md: 1.125rem;
	--mm-fs-h3: clamp(1.125rem, 1rem + 0.45vw, 1.5rem);      /* 24px: "Een stal waar …", USP-titels */
	--mm-fs-h2: clamp(1.625rem, 1.25rem + 1.1vw, 2.25rem);   /* 36px */
	--mm-fs-h1: clamp(2.125rem, 1rem + 4vw, 4.375rem);       /* 70px: hero */
	--mm-lh: 2;                      /* ontwerp: 16px tekst op 32px regelhoogte */
	--mm-kicker-tracking: 0;         /* kicker = kleine gele kop, zonder hoofdletters */
	--mm-kicker-transform: none;

	/* ---------- Layout & vorm ---------- */
	--mm-container: 1360px;
	--mm-gutter: clamp(1rem, 4vw, 2.5rem);
	--mm-section: clamp(3.5rem, 4vw + 2rem, 7rem);
	--mm-gap: clamp(1rem, 2.5vw, 2.5rem);
	--mm-radius: 2.5rem;             /* grote ronde hoeken van foto's (ontwerp) */
	--mm-radius-btn: 999px;          /* pilvormige knoppen */
	--mm-skew: 0deg;
	--mm-cut: 0px;
	--mm-shadow: 0 10px 30px rgba(0, 0, 0, .12);
	--mm-ease: cubic-bezier(.2, .7, .2, 1);

	/* ---------- Hero ---------- */
	--mm-hero-overlay: linear-gradient(180deg, rgba(32, 38, 68, .62) 0%, rgba(32, 38, 68, .55) 55%, rgba(32, 38, 68, .9) 88%, #202644 100%);
	--mm-hero-glow: none;

	/* ---------- Header (ontwerp op 1920 breed: topbalk 46, header 166, logo 145 hoog) ---------- */
	--mm-header-bg: #ffffff;
	--mm-header-height: clamp(6.75rem, 8.65vw, 10.375rem);
	--mm-logo-height: clamp(5.5rem, 7.55vw, 9.0625rem);

	/* ---------- Topbalk (telefoon, e-mail, taal) ---------- */
	--mm-topbar-bg: var(--mm-accent);
	--mm-topbar-color: var(--mm-ink);
	--mm-topbar-height: clamp(2.75rem, 2.4vw, 2.875rem);
}

/* Kleinere header op tablet/mobiel (main.css gaat onder 1024px uit van een header van 5rem). */
@media (max-width: 1024px) {
	:root {
		--mm-header-height: 5rem;
		--mm-logo-height: 3.75rem;
	}
}