@import url("https://use.typekit.net/erf8zpd.css");

/* Design Research typography — the live sites' brand face, Adobe Freight Sans
   (freight-sans-pro: 400 regular, 700 = FreightSans Pro Bold for headings),
   via the Web Directions Typekit kit erf8zpd (the one the current sites use;
   it ships the bold sans, unlike the trimmed kyw6teh kit). Montserrat / system
   faces are graceful fallbacks if the kit can't load.
   Mirrors the theme typography contract in sites/ai-engineer/css/typography.css. */
@layer theme {
	:root {
		--font-body:    "freight-sans-pro", "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
		--font-heading: "freight-sans-pro", "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

		--font-size-regular:  clamp(1.00rem, 1.4vw, 1.05rem);
		--font-size-large:    clamp(1.25rem, 2.0vw, 1.50rem);
		--font-size-x-large:  clamp(2.25rem, 2.6vw, 3.00rem);
		--font-size-xx-large: clamp(3.25rem, 3.6vw, 4.50rem);

		--weight-regular: 400;
		--weight-medium:  600;
		--weight-bold:    800;
		--leading-tight:  1.06;
		--leading-body:   1.55;
		--heading-letterspacing: -0.015em;
	}

	html { font-kerning: normal; font-feature-settings: "kern","liga","clig","calt"; }
	body {
		font-family: var(--font-body);
		font-size: var(--font-size-regular);
		line-height: var(--leading-body);
		font-optical-sizing: auto;
	}

	h1, h2, h3 {
		font-family: var(--font-heading);
		font-optical-sizing: auto;
		letter-spacing: var(--heading-letterspacing);
		margin: 0 0 var(--space-3);
	}
	h1 { font-size: var(--font-size-xx-large); line-height: var(--leading-tight); font-weight: 800; }
	h2 { font-size: var(--font-size-x-large);  line-height: var(--leading-tight); font-weight: 800; }
	h3 { font-size: var(--font-size-large); font-weight: var(--weight-medium); }

	/* margin-block (not the `margin` shorthand) so this theme-layer rule doesn't
	   clobber `margin-inline: auto` centring in the components layer. */
	p  { margin-block: 0 var(--space-3); }

	.media-object h2 { font-size: var(--font-size-large); }
}