/* Typography source of truth. See ../../docs/typography.md. */
@layer theme, base, components, utilities;
@layer base {
	:root {
		--type-family-ui: 'Google Sans Flex', 'Noto Sans', 'Noto Sans KR',
			'Noto Sans JP', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai',
			'Noto Sans Arabic', sans-serif;
		--type-family-code: 'Google Sans Code', ui-monospace, monospace;
		--type-weight-regular: 400;
		--type-weight-body: 500;
		--type-weight-heading: 600;
		--type-weight-strong: 700;
		--type-tracking-heading: -0.01em;
		--type-tracking-normal: 0em;
		--type-tracking-body: 0.014em;
		--type-tracking-label: 0.04em;
		--type-tracking-eyebrow: 0.1em;
		--type-tracking-brand: 0.04em;
		--type-leading-copy: 1.625;
		--type-leading-prose: 1.75;
		--type-leading-tight: 1.25;
		--type-leading-control: 1.4;
		--type-brand-size: clamp(2rem, 3.5vw, 3rem);
		--type-brand-compact-size: 1.125rem;
		--type-brand-leading: 1.1;
		--type-size-micro: 0.625rem;
		--type-line-micro: 0.875rem;
		--type-size-caption: 0.6875rem;
		--type-line-caption: 0.9375rem;
		--type-size-small: 0.75rem;
		--type-line-small: 1.125rem;
		--type-size-compact: 0.8125rem;
		--type-line-compact: 1.25rem;
		--type-size-body: 0.875rem;
		--type-line-body: 1.4375rem;
		--type-size-comfortable: 0.9375rem;
		--type-line-comfortable: 1.5rem;
		--type-size-base: 1rem;
		--type-line-base: 1.5rem;
		--type-size-h6: 1rem;
		--type-line-h6: 1.5rem;
		--type-size-h5: 1.125rem;
		--type-line-h5: 1.625rem;
		--type-size-h4: 1.25rem;
		--type-line-h4: 1.75rem;
		--type-size-title: 1.375rem;
		--type-line-title: 1.875rem;
		--type-size-h3: 1.5rem;
		--type-line-h3: 2rem;
		--type-size-h2: 1.75rem;
		--type-line-h2: 2.25rem;
		--type-size-h1: 2rem;
		--type-line-h1: 2.5rem;
		--type-size-display: 2.5rem;
		--type-line-display: 3rem;
		--type-size-hero: 3rem;
		--type-line-hero: 3.5rem;
		--type-size-metric: 4rem;
		--type-line-metric: 4rem;
		--type-body: var(--type-weight-body) var(--type-size-body) /
			var(--type-line-body) var(--type-family-ui);
		--type-small: var(--type-weight-body) var(--type-size-small) /
			var(--type-line-small) var(--type-family-ui);
		--type-caption: var(--type-weight-body) var(--type-size-caption) /
			var(--type-line-caption) var(--type-family-ui);
		--type-compact: var(--type-weight-body) var(--type-size-compact) /
			var(--type-line-compact) var(--type-family-ui);
		--type-micro: var(--type-weight-body) var(--type-size-micro) /
			var(--type-line-micro) var(--type-family-ui);
		--type-h1: var(--type-weight-heading) var(--type-size-h1) /
			var(--type-line-h1) var(--type-family-ui);
		--type-h2: var(--type-weight-heading) var(--type-size-h2) /
			var(--type-line-h2) var(--type-family-ui);
		--type-h3: var(--type-weight-heading) var(--type-size-h3) /
			var(--type-line-h3) var(--type-family-ui);
		--type-h4: var(--type-weight-heading) var(--type-size-h4) /
			var(--type-line-h4) var(--type-family-ui);
		--type-h5: var(--type-weight-heading) var(--type-size-h5) /
			var(--type-line-h5) var(--type-family-ui);
		--type-h6: var(--type-weight-heading) var(--type-size-h6) /
			var(--type-line-h6) var(--type-family-ui);
		--type-title: var(--type-weight-heading) var(--type-size-title) /
			var(--type-line-title) var(--type-family-ui);
		--type-display: var(--type-weight-heading) var(--type-size-display) /
			var(--type-line-display) var(--type-family-ui);
		--type-brand: var(--type-weight-heading) var(--type-brand-size) /
			var(--type-brand-leading) var(--type-family-ui);
		--type-brand-compact: var(--type-weight-heading)
			var(--type-brand-compact-size) / var(--type-line-base)
			var(--type-family-ui);
	}
	body {
		font: var(--type-body);
		letter-spacing: var(--type-tracking-body);
		font-optical-sizing: auto;
	}
	button,
	input,
	select,
	textarea {
		font-family: inherit;
		letter-spacing: inherit;
	}
}
@layer components {
	.type-body {
		font: var(--type-body);
		letter-spacing: var(--type-tracking-body);
	}
	.type-small {
		font: var(--type-small);
		letter-spacing: var(--type-tracking-body);
	}
	.type-caption {
		font: var(--type-caption);
		letter-spacing: var(--type-tracking-body);
	}
	.type-compact {
		font: var(--type-compact);
		letter-spacing: var(--type-tracking-body);
	}
	.type-micro {
		font: var(--type-micro);
		letter-spacing: var(--type-tracking-body);
	}
	.type-h1 {
		font: var(--type-h1);
		letter-spacing: var(--type-tracking-heading);
	}
	.type-h2 {
		font: var(--type-h2);
		letter-spacing: var(--type-tracking-heading);
	}
	.type-h3 {
		font: var(--type-h3);
		letter-spacing: var(--type-tracking-heading);
	}
	.type-h4 {
		font: var(--type-h4);
		letter-spacing: var(--type-tracking-normal);
	}
	.type-h5 {
		font: var(--type-h5);
		letter-spacing: var(--type-tracking-normal);
	}
	.type-h6 {
		font: var(--type-h6);
		letter-spacing: var(--type-tracking-normal);
	}
	.type-title {
		font: var(--type-title);
		letter-spacing: var(--type-tracking-normal);
	}
	.type-display {
		font: var(--type-display);
		letter-spacing: var(--type-tracking-heading);
	}
	.type-eyebrow {
		font: var(--type-caption);
		letter-spacing: var(--type-tracking-eyebrow);
		text-transform: uppercase;
	}
	.type-label {
		font: var(--type-h6);
		letter-spacing: var(--type-tracking-label);
	}
	.type-button {
		font: var(--type-body);
		font-weight: var(--type-weight-heading);
		line-height: var(--type-leading-control);
		letter-spacing: var(--type-tracking-label);
	}
	.type-brand {
		font: var(--type-brand);
		letter-spacing: var(--type-tracking-brand);
	}
	.type-brand-compact {
		font: var(--type-brand-compact);
		letter-spacing: var(--type-tracking-brand);
	}
	.type-tagline {
		font: var(--type-body);
		font-weight: var(--type-weight-regular);
		letter-spacing: var(--type-tracking-body);
	}
	.type-number {
		font-variant-numeric: tabular-nums;
		letter-spacing: var(--type-tracking-normal);
	}
	.type-wrap {
		min-width: 0;
		overflow-wrap: anywhere;
	}
}