/**
 * Design tokens pulled directly from the Figma file's color & text styles.
 */

:root {
	/* Color */
	--color-black: #000000;
	--color-white: #ffffff;
	/* Brand teal — use for backgrounds, decorative accents, and text that
	   isn't sitting on a white/near-white surface (icons on colored/dark
	   panels etc). At 2.13:1 against white it fails WCAG AA outright, so
	   never use it for text on a white/near-white background — use
	   --color-primary-text instead there. */
	--color-primary: #58c1c7;
	/* Darker teal, same hue — for text on white/near-white backgrounds.
	   3.28:1 against white clears AA for large text (headings, bold/
	   medium-weight short text) but not full-size regular body copy. */
	--color-primary-text: #3e9ba0;
	--color-gray-900: #111111;
	--color-gray-800: #1a1a1a;
	--color-gray-600: #666666;
	--color-gray-500: #989ba1;
	--color-gray-400: #999999;
	--color-gray-300: #c9d2dd;
	--color-gray-200: #e0e0e0;
	--color-gray-100: #f7f7f7;
	--color-surface-subtle: #515e65;

	--color-text: var(--color-gray-900);
	--color-text-muted: var(--color-gray-600);
	--color-border: var(--color-gray-200);
	--color-surface: var(--color-gray-100);

	/* Type families */
	--font-heading: 'Elms Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* Type scale — size / line-height, matched to the Figma text styles */
	--text-display: 94.72px;
	--text-display-lh: 1.05;
	--text-h1: 48px;
	--text-h1-lh: 1.1;
	--text-h2: 40px;
	--text-h2-lh: 1.05;
	--text-h3: 32px;
	--text-h3-lh: 1.05;
	--text-h4: 30px;
	--text-h4-lh: 1.35;
	--text-subtitle: 22px;
	--text-subtitle-lh: 1.05;
	--text-body-lg: 18px;
	--text-body-lg-lh: 1.05;
	--text-body: 16px;
	--text-body-lh: 1.3;
	--text-body-sm: 15px;
	--text-body-sm-lh: 1.55;
	--text-caption: 14px;
	--text-caption-lh: 1.3;
	--text-label: 13px;
	--text-label-lh: 1.3;
	--text-label-ls: 1.5px;
	--text-tag: 12px;
	--text-tag-lh: 1.3;
	--text-tag-ls: 1px;
	--text-paragraph: 14px;
	--text-paragraph-lh: 1.5;

	/* Weights */
	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-bold: 700;

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 40px;
	--space-8: 48px;
	--space-9: 60px;
	--space-10: 64px;
	--space-11: 80px;
	--space-12: 96px;
	--space-13: 120px;

	/* Radii */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-2xl: 32px;
	--radius-pill: 999px;

	/* Layout */
	--container-max: 1440px;
	--container-padding: 80px;
}

@media (max-width: 900px) {
	:root {
		--container-padding: 40px;
		--text-display: 56px;
		--text-h1: 36px;
		--text-h2: 30px;
		--text-h3: 26px;
	}
}

@media (max-width: 560px) {
	:root {
		--container-padding: 20px;
		--text-display: 40px;
		--text-h1: 30px;
		--text-h2: 26px;
		--text-h3: 22px;
	}
}