/*
 * Design tokens. Every colour, space, radius, shadow and type step the site
 * uses is named here. Nothing below this file hard-codes a brand colour.
 */

:root {
	/* Brand */
	--am-green: #39b54a;
	--am-green-dark: #208b2f;
	--am-green-darker: #187326;
	--am-green-soft: #e7f8ea;
	--am-yellow: #f5c400;
	--am-yellow-deep: #c49200;
	--am-yellow-soft: #fff6d4;

	/* Ink and surfaces */
	--am-ink: #243028;
	--am-ink-soft: #4a5a4f;
	--am-muted: #6c757d;
	--am-line: #e4ece6;
	--am-surface: #fff;
	--am-surface-soft: #f6faf6;
	--am-surface-dark: #14211a;
	--am-on-dark: #fff;

	/* Status */
	--am-danger: #8a1f1f;
	--am-danger-soft: #fff1f1;
	--am-danger-line: #c44747;

	/* Type */
	--am-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	--am-text-xs: 0.78rem;
	--am-text-sm: 0.875rem;
	--am-text-base: 1rem;
	--am-text-lg: 1.125rem;
	--am-text-xl: 1.3rem;
	--am-h4: clamp(1.05rem, 1.4vw, 1.2rem);
	--am-h3: clamp(1.25rem, 2vw, 1.6rem);
	--am-h2: clamp(1.75rem, 3vw, 2.5rem);
	--am-h1: clamp(2rem, 4.5vw, 3.25rem);
	--am-leading: 1.65;

	/* Space */
	--am-space-1: 4px;
	--am-space-2: 8px;
	--am-space-3: 12px;
	--am-space-4: 16px;
	--am-space-5: 24px;
	--am-space-6: 32px;
	--am-space-7: 48px;
	--am-space-8: 64px;
	--am-space-9: 96px;

	/* Shape */
	--am-radius-sm: 6px;
	--am-radius: 10px;
	--am-radius-lg: 16px;
	--am-radius-pill: 999px;

	/* Depth */
	--am-shadow-sm: 0 2px 8px rgba(20, 40, 30, 0.07);
	--am-shadow: 0 10px 25px rgba(20, 40, 30, 0.1);
	--am-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.22);

	/* Layout */
	--am-gutter: 40px;
	--am-container: 1280px;
	--am-header-height: 84px;

	/* Motion */
	--am-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--am-fast: 0.2s;
	--am-slow: 0.4s;
}

@media (max-width: 1024px) {
	:root {
		--am-gutter: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--am-fast: 0.01ms;
		--am-slow: 0.01ms;
	}
}