/* ==========================================================================
   GreenHygiene — design tokens
   Merkkleur #094438 komt uit het officiële logo.
   ========================================================================== */

/* Self-hosted fonts (geen externe verzoeken → AVG-vriendelijk) */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/manrope-latin.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;
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin.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;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Instrument Serif';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/instrument-serif-italic-latin.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;
}

@font-face {
	font-family: 'Instrument Serif';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* --- Merkkleuren --- */
	--gh-forest: #094438;
	--gh-forest-dark: #052e26;
	--gh-forest-light: #0f6b57;
	--gh-leaf: #2fa36b;
	/* Actiekleur uit de referentie: limoen op donkergroen. */
	--gh-lime: #c6f24e;

	/* Eén hoverkleur voor de hele site: knoppen kleuren limoen, randen ook. */
	--gh-hover: #c6f24e;
	--gh-hover-ink: #0d1f16;
	--gh-lime-dark: #b2e02f;
	--gh-ink-btn: #0d1f16;
	--gh-leaf-dark: #238556;
	--gh-mint: #d9f0e5;
	--gh-mint-soft: #eaf6f0;
	--gh-cream: #f4f4f4;
	--gh-page: #faf7ef;
	--gh-sand: #efeadf;
	--gh-white: #ffffff;

	/* --- Tekst --- */
	--gh-ink: #14201c;
	--gh-muted: #5b6b65;
	--gh-on-dark: #eef5f1;
	--gh-on-dark-muted: #a9c4b9;

	/* --- Tekstkleuren die meebewegen met de achtergrond ---
	   Componenten gebruiken deze in plaats van vaste kleuren, zodat ze
	   automatisch kloppen op een lichte én een donkere sectie. --- */
	--gh-text: var(--gh-ink);
	--gh-text-muted: var(--gh-muted);
	--gh-text-strong: var(--gh-forest);

	/* --- Lijnen & vlakken --- */
	--gh-line: #dfe5e1;
	--gh-line-dark: #1c584a;
	--gh-surface: #ffffff;
	--gh-surface-alt: var(--gh-cream);

	/* --- Status --- */
	--gh-error: #b3261e;
	--gh-error-bg: #fdecea;
	--gh-success: #1d7a4f;
	--gh-success-bg: #e6f4ec;

	/* --- Typografie --- */
	--gh-font-heading: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--gh-font-accent: 'Instrument Serif', Georgia, 'Times New Roman', serif;
	--gh-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

	--gh-text-xs: 1.3rem;
	--gh-text-sm: 1.5rem;
	--gh-text-base: 1.7rem;
	--gh-text-lg: 1.9rem;
	--gh-text-xl: clamp(2rem, 0.4vw + 1.84rem, 2.4rem);
	--gh-text-2xl: clamp(2.4rem, 1vw + 2rem, 3.2rem);
	--gh-text-3xl: clamp(3rem, 2vw + 2rem, 4.4rem);
	--gh-text-4xl: clamp(3.6rem, 3.5vw + 2rem, 6rem);

	--gh-leading-tight: 1.1;
	--gh-leading-snug: 1.3;
	--gh-leading-normal: 1.65;

	/* --- Ruimte --- */
	--gh-space-1: 0.4rem;
	--gh-space-2: 0.8rem;
	--gh-space-3: 1.2rem;
	--gh-space-4: 1.6rem;
	--gh-space-5: 2.4rem;
	--gh-space-6: 3.2rem;
	--gh-space-7: 4.8rem;
	--gh-space-8: 6.4rem;
	--gh-space-9: 9.6rem;

	--gh-section-y: clamp(5.6rem, 6vw, 10.4rem);
	--gh-container: 1300px;
	/* Alle containers even breed; de smalle variant is bewust gelijkgetrokken.
	   Leesbaarheid van lopende tekst blijft geborgd via max-width op p (68ch). */
	--gh-container-narrow: 1300px;
	--gh-gutter: clamp(2rem, 4vw, 4rem);

	/* --- Vorm --- */
	--gh-radius-sm: 10px;
	--gh-radius: 18px;
	--gh-radius-lg: 28px;
	--gh-radius-xl: 40px;
	--gh-radius-pill: 999px;

	/* Vaste hoogte voor alle call-to-actions. */
	--gh-btn-height: 4.8rem;

	/* Bewust plat design: geen slagschaduwen. De tokens blijven bestaan zodat
	   je ze later met één regel weer kunt aanzetten. */
	--gh-shadow-sm: none;
	--gh-shadow: none;
	--gh-shadow-lg: none;

	--gh-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
	--gh-transition-slow: 0.32s ease;
}