/* ==========================================================================
   Clazing & Mol metalstud, timmerwerk & afbouw — design tokens

   Ported verbatim from the brand's design system (tokens/colors.css,
   typography.css, spacing.css, shape.css, motion.css). The mark is an M cut
   from straight lines with a chevron notched into it, running green into gold:
   everything here follows from that — straight edges, high contrast, one green,
   generous white space, nothing decorative. Do not add a value that could not
   sit next to that mark.

   Fonts are loaded with a <link> in templates/header.php rather than the
   design system's @import, so the stylesheet is not blocked on a round-trip.
   ========================================================================== */

:root {
	/* ---- Brand base -----------------------------------------------------
	   Huisstijl green: C70 M0 Y90 K0 / R81 G176 B71. The darker steps exist
	   only for hover, press and text-on-white contrast; 100/050 for washes. */
	--cm-green-500: #52b048;
	--cm-green-600: #469a3d;
	--cm-green-700: #387c31;
	--cm-green-300: #8ecd87;
	--cm-green-100: #dcf0d9;
	--cm-green-050: #f0f8ee;

	/* Logo black + the charcoal the white logo is presented on */
	--cm-black: #000000;
	--cm-ink-900: #14150f;
	--cm-ink-800: #1f211a;
	--cm-charcoal: #333333;

	/* Warm neutrals — sawdust / bare timber, kept close to grey */
	--cm-neutral-000: #ffffff;
	--cm-neutral-050: #f8f8f6;
	--cm-neutral-100: #f1f1ee;
	--cm-neutral-200: #e4e4df;
	--cm-neutral-300: #cfcfc8;
	--cm-neutral-400: #a8a8a0;
	--cm-neutral-500: #7d7d75;
	--cm-neutral-600: #5b5b54;
	--cm-neutral-700: #403f3a;

	/* Semantic status. Green is the brand, so success reuses it — a green
	   fill always means "good / go / brand", never "warning". */
	--cm-success: #469a3d;
	--cm-warning: #c98a12;
	--cm-danger: #b3382c;
	--cm-info: #2f6c8f;

	/* ---- Semantic aliases ---- */
	--accent: var(--cm-green-500);
	--accent-hover: var(--cm-green-600);
	--accent-press: var(--cm-green-700);
	--accent-soft: var(--cm-green-100);
	--accent-wash: var(--cm-green-050);

	--text-body: var(--cm-ink-900);
	--text-heading: var(--cm-black);
	--text-muted: var(--cm-neutral-600);
	--text-faint: var(--cm-neutral-500);
	--text-inverse: var(--cm-neutral-000);
	--text-accent: var(--cm-green-600);
	--text-link: var(--cm-green-700);
	--text-link-hover: var(--cm-green-500);

	--surface-page: var(--cm-neutral-000);
	--surface-sunken: var(--cm-neutral-050);
	--surface-card: var(--cm-neutral-000);
	--surface-muted: var(--cm-neutral-100);
	--surface-dark: var(--cm-charcoal);
	--surface-darker: var(--cm-ink-900);
	--surface-accent: var(--cm-green-500);

	--border-subtle: var(--cm-neutral-200);
	--border-default: var(--cm-neutral-300);
	--border-strong: var(--cm-ink-900);
	--border-accent: var(--cm-green-500);
	--border-on-dark: rgba(255, 255, 255, .16);

	--focus-ring: var(--cm-green-500);

	/* Scrims. Text over photography gets a solid plate or a flat scrim —
	   never a protection gradient, never a backdrop blur. */
	--scrim-photo: rgba(20, 21, 15, .72);
	--scrim-overlay: rgba(20, 21, 15, .55);
	--scrim-lightbox: rgba(20, 21, 15, .92);
	--hover-on-dark: rgba(255, 255, 255, .14);

	/* ---- Type. Montserrat only: Bold (700) for display, headings, buttons,
	   labels and badges; Medium (500) for all body and UI text. ---- */
	--font-core: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--font-display: var(--font-core);
	--font-body: var(--font-core);

	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	--size-display-xl: 4.5rem;
	--size-display-l: 3.25rem;
	--size-display-m: 2.5rem;
	--size-h1: 2rem;
	--size-h2: 1.5rem;
	--size-h3: 1.25rem;
	--size-h4: 1.0625rem;

	--size-body-l: 1.125rem;
	--size-body-m: 1rem;
	--size-body-s: .875rem;
	--size-caption: .75rem;
	--size-overline: .6875rem;

	--leading-tight: 1.05;
	--leading-snug: 1.2;
	--leading-normal: 1.55;
	--leading-loose: 1.7;

	/* Uppercase Montserrat needs the air */
	--tracking-display: .01em;
	--tracking-heading: .02em;
	--tracking-overline: .16em;
	--tracking-body: 0;

	--text-display-xl: var(--weight-bold) var(--size-display-xl)/var(--leading-tight) var(--font-display);
	--text-display-l: var(--weight-bold) var(--size-display-l)/var(--leading-tight) var(--font-display);
	--text-display-m: var(--weight-bold) var(--size-display-m)/var(--leading-snug) var(--font-display);
	--text-h1: var(--weight-bold) var(--size-h1)/var(--leading-snug) var(--font-display);
	--text-h2: var(--weight-bold) var(--size-h2)/var(--leading-snug) var(--font-display);
	--text-h3: var(--weight-bold) var(--size-h3)/var(--leading-snug) var(--font-display);
	--text-body-l: var(--weight-medium) var(--size-body-l)/var(--leading-normal) var(--font-body);
	--text-body-m: var(--weight-medium) var(--size-body-m)/var(--leading-normal) var(--font-body);
	--text-body-s: var(--weight-medium) var(--size-body-s)/var(--leading-normal) var(--font-body);
	--text-caption: var(--weight-medium) var(--size-caption)/1.4 var(--font-body);

	/* ---- Spacing. 4px base. Density is airy: the brand's confidence comes
	   from empty space, not from more content. ---- */
	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	--gutter-inline: 24px;
	--gutter-inline-lg: 48px;
	--section-y: 96px;
	--section-y-tight: 64px;

	--measure-narrow: 44ch;
	--measure-body: 62ch;
	--container-max: 1240px;
	--container-narrow: 840px;

	--control-h-s: 34px;
	--control-h-m: 44px;
	--control-h-l: 52px;

	/* ---- Shape. The mark is built from straight cuts — corners stay square
	   or nearly so. No pills, no full-round anything. ---- */
	--radius-none: 0px;
	--radius-xs: 2px;
	--radius-sm: 3px;
	--radius-md: 4px;
	--radius-lg: 6px;

	--border-w-hairline: 1px;
	--border-w-default: 1px;
	--border-w-thick: 2px;
	--rule-accent: 3px;

	/* Flat at rest. -md only on a hovered interactive card, -lg only on
	   overlays. No ambient elevation, no glow. */
	--shadow-none: none;
	--shadow-sm: 0 1px 2px rgba(20, 21, 15, .08);
	--shadow-md: 0 2px 8px rgba(20, 21, 15, .10);
	--shadow-lg: 0 12px 32px rgba(20, 21, 15, .14);
	--shadow-inset-hairline: inset 0 0 0 1px var(--border-subtle);
	--shadow-focus: 0 0 0 3px rgba(82, 176, 72, .35);

	/* The one texture: a 45° repeating stripe lifted from the mark, for
	   section plates and as the honest placeholder for missing photography. */
	--pattern-chevron: repeating-linear-gradient(135deg, var(--cm-neutral-100) 0 10px, var(--cm-neutral-050) 10px 20px);
	--pattern-chevron-dark: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 10px, rgba(255, 255, 255, 0) 10px 20px);

	/* ---- Motion. Restrained and functional. No bounce, no spring, no
	   parallax, no scroll-jacking, no looping motion. ---- */
	--dur-instant: 80ms;
	--dur-fast: 140ms;
	--dur-base: 200ms;
	--dur-slow: 320ms;
	--ease-standard: cubic-bezier(.2, 0, .2, 1);
	--ease-out: cubic-bezier(0, 0, .2, 1);
	--ease-in: cubic-bezier(.4, 0, 1, 1);
	--transition-control:
		background-color var(--dur-fast) var(--ease-standard),
		color var(--dur-fast) var(--ease-standard),
		border-color var(--dur-fast) var(--ease-standard),
		box-shadow var(--dur-fast) var(--ease-standard);

	/* Header condenses 84 → 64 past 12px of scroll; logo 52 → 40. */
	--header-h: 84px;
	--header-h-condensed: 64px;
	--header-logo-h: 52px;
	--header-logo-h-condensed: 40px;
}

/* --------------------------------------------------------------------------
   Keyframes. The vocabulary is exactly four moves: scroll reveal, state
   transition, content swap, photo hover.
   -------------------------------------------------------------------------- */
@keyframes fade_in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@keyframes toast_in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Reduced motion is honoured throughout: helpers render their final state and
   every transition and animation is disabled.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}