/*
 * Geometry, spacing and motion tokens.
 *
 * Everything sits on a 4px grid: spacing comes from the --space-* scale
 * (--space-n = n × 4px), and every type token pairs a size with a line height
 * that is a multiple of 4px (tokens/typography.css).
 */
:root {
	--space-1: 0.25rem;  /*   4px */
	--space-2: 0.5rem;   /*   8px */
	--space-3: 0.75rem;  /*  12px */
	--space-4: 1rem;     /*  16px */
	--space-5: 1.25rem;  /*  20px */
	--space-6: 1.5rem;   /*  24px */
	--space-7: 1.75rem;  /*  28px */
	--space-8: 2rem;     /*  32px */
	--space-10: 2.5rem;  /*  40px */
	--space-12: 3rem;    /*  48px */
	--space-14: 3.5rem;  /*  56px */
	--space-16: 4rem;    /*  64px */
	--space-20: 5rem;    /*  80px */
	--space-24: 6rem;    /*  96px */
	--space-30: 7.5rem;  /* 120px */
	--space-40: 10rem;   /* 160px */

	--radius: 0rem;
	--border-width: 1px;

	--gutter: var(--space-5);
	--grid-gap: var(--space-5);
	--container: 86rem;

	/*
	 * Section spacing: the vertical padding of every block, in three steps
	 * (data-space="sm|md|lg", the "Abstand" field; blocks.css). Tune the
	 * rhythm of the whole site here: phone / tablet (40rem) / desktop (64rem).
	 *            phone  tablet  desktop
	 *   sm        48      64      80
	 *   md        80      96     120   (default)
	 *   lg        96     128     160
	 */
	--space-section-sm: var(--space-12);
	--space-section-md: var(--space-20);
	--space-section-lg: var(--space-24);
	--spacing-section: var(--space-section-md);

	--header-height: 4.5rem;
	--topbar-height: 0rem;
	--control-height: var(--space-12);

	/* Four-pointed star: eyebrow marks and the hero pager (reference "image copy 5"). */
	--icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0C5.5 3.3 6.7 4.5 10 5 6.7 5.5 5.5 6.7 5 10 4.5 6.7 3.3 5.5 0 5 3.3 4.5 4.5 3.3 5 0Z'/%3E%3C/svg%3E");
	--icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M5 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E");
	--icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.1'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M1.5 8h13M8 1.5c2 2 2.8 4 2.8 6.5S10 12.5 8 14.5M8 1.5C6 3.5 5.2 5.5 5.2 8s.8 4.5 2.8 6.5'/%3E%3C/svg%3E");
	--icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M1.5 1.5l13 7.5-13 7.5z'/%3E%3C/svg%3E");
	--icon-chevron-large: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 40'%3E%3Cpath d='M1 1l10 19L1 39' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");

	/*
	 * Motion (assets/css/motion.css): one calm direction for every
	 * interaction. Things rise and draw, then settle; nothing bounces.
	 *   fast    colour changes                       240ms
	 *   base    fills, lines, nudges                 560ms
	 *   slow    photographs settling                 1400ms
	 *   reveal  content arriving on scroll           1000ms, staggered
	 * One curve for all of it: a long, soft ease-out.
	 */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-standard: var(--ease-out);
	--duration-fast: 240ms;
	--duration-base: 560ms;
	--duration-slow: 1400ms;
	--duration-reveal: 1000ms;
	--stagger: 90ms;
	--motion-distance: var(--space-5);
	--motion-nudge: var(--space-1);
	--motion-zoom: 1.04;
	--motion-settle: 1.06;
}

@media (min-width: 40rem) {
	:root {
		--space-section-sm: var(--space-16);
		--space-section-md: var(--space-24);
		--space-section-lg: 8rem;
	}
}

@media (min-width: 64rem) {
	:root {
		--gutter: var(--space-8);
		--grid-gap: var(--space-8);
		--space-section-sm: var(--space-20);
		--space-section-md: var(--space-30);
		--space-section-lg: var(--space-40);
		--header-height: 5.5rem;
		--topbar-height: 2.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 1ms;
		--duration-base: 1ms;
		--duration-slow: 1ms;
		--duration-reveal: 1ms;
		--stagger: 0ms;
		--motion-distance: 0px;
		--motion-nudge: 0px;
		--motion-zoom: 1;
		--motion-settle: 1;
	}
}