/* Design Tokens - CSS variables and design system tokens */

:root {
	--link-color: var(--color-accent);
	--link-hover: var(--color-accent-strong, #e6d5b8); /* optional */
	--link-underline: 0.12em solid currentColor;

	/* Spacing (8px Rhythmus) */
	--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-2xs: 0.25rem;   /* 4px  */
	--space-xs:  0.5rem;    /* 8px  */
	--space-s:   1rem;      /* 16px */
	--space-m:   1.5rem;    /* 24px */
	--space-l:   2rem;      /* 32px */
	--space-xl:   3rem;      /* 48px */

	/* Radii */
	--radius-s: 4px;
	--radius-m: 8px;
	--radius-l: 16px;

	/* Max Widths */
	--width-content: 720px;
	--width-wide: 1024px;

	/* Typography scale */
	--font-size-base: 18px;
	--font-size-h1: 2.2rem;
	--font-size-h2: 1.6rem;
	--font-size-h3: 1.25rem;
}