/* ══════════════════════════════════════════════════════════════════════════════
   Ten Dam Vloeren — CSS Custom Properties (Figma exact + fluid clamp)
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
	/* ── Brand Colors ─────────────────────────────────────────────────────── */
	--tdv-black:        #251f21;
	--tdv-white:        #ffffff;
	--tdv-light-grey:   #f0f0f0;
	--tdv-grey:         #919296;
	--tdv-dark-grey:    #595759;
	--tdv-light-brown:  #c49967;
	--tdv-dark-brown:   #754517;
	--tdv-terracotta:   #c24e2a;
	--tdv-about-dark:   #4c363a;
	--tdv-border:       #d4d4d4;
	--tdv-green:        #00de04;

	/* ── Typography — Fonts ───────────────────────────────────────────────── */
	--font-heading: Georgia, 'Times New Roman', serif;
	--font-body:    'Segoe UI', system-ui, -apple-system, sans-serif;

	/* ── Typography — Fluid Sizes (clamp: mobile → desktop) ──────────────── */
	--h1: clamp(2.5rem, 1.5rem + 3.333vw, 5.5rem);    /* 40px → 88px  */
	--h2: clamp(2rem, 1rem + 3.333vw, 4rem);            /* 32px → 64px  */
	--h3: clamp(1.75rem, 0.875rem + 2.917vw, 3.5rem);   /* 28px → 56px  */
	--h4: clamp(1.5rem, 1.25rem + 0.833vw, 2rem);       /* 24px → 32px  */
	--h5: clamp(1.25rem, 1.125rem + 0.417vw, 1.5rem);   /* 20px → 24px  */
	--h6: clamp(1.125rem, 1.063rem + 0.208vw, 1.25rem); /* 18px → 20px  */
	--text-lg:  clamp(1.063rem, 0.938rem + 0.417vw, 1.25rem); /* 17px → 20px */
	--text-md:  18px;
	--text-reg: 16px;
	--text-sm:  14px;
	--text-xs:  12px;

	/* ── Line Heights ─────────────────────────────────────────────────────── */
	--lh-heading: 110%;
	--lh-body:    150%;

	/* ── Spacing — Fluid (clamp: mobile → desktop) ───────────────────────── */
	--section-padding: clamp(3rem, 1.5rem + 5vw, 10rem);    /* 48px → 160px */
	--section-gap:     clamp(2rem, 1rem + 3.333vw, 5rem);   /* 32px → 80px  */
	--inner-max:       1728px;  /* 1504px content + 2×112px padding (border-box) */
	--container-max:   1920px;

	/* ── Border Radius ────────────────────────────────────────────────────── */
	--radius-btn:   112px;
	--radius-card:  8px;
	--radius-logo:  16px;
	--radius-nav:   32px;
	--radius-social: 48px;
	--radius-round: 60px;

	/* ── Shadows (Figma exact) ────────────────────────────────────────────── */
	--shadow-xxs: 0px 1px 2px 0px rgba(0,0,0,0.05);
	--shadow-xs:  0px 1px 2px 0px rgba(0,0,0,0.06), 0px 1px 3px 0px rgba(0,0,0,0.1);
	--shadow-sm:  0px 2px 4px -2px rgba(0,0,0,0.06), 0px 4px 8px -2px rgba(0,0,0,0.1);
	--shadow-md:  0px 4px 6px -2px rgba(0,0,0,0.03), 0px 12px 16px -4px rgba(0,0,0,0.08);
	--shadow-lg:  0px 8px 8px -4px rgba(0,0,0,0.03), 0px 20px 24px -4px rgba(0,0,0,0.08);
	--shadow-xl:  0px 24px 48px -12px rgba(0,0,0,0.18);
	--shadow-xxl: 0px 32px 64px -12px rgba(0,0,0,0.14);

	/* ── Transitions ──────────────────────────────────────────────────────── */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--duration: 300ms;
}