/**
 * Atlas Labs — Typography System
 *
 * Utility classes implementing the type scale from
 * DESIGN_SYSTEM.md#section-3-typography-tokens, so any element can
 * take on any type-scale style regardless of its HTML tag (base.css
 * only styles bare h1-h6/p/body). Named after the scale itself
 * (al-text-h2, al-text-caption, ...), not after page-specific roles
 * like "hero title" — assigning a scale step to a specific role on a
 * specific page is a decision for the sprint that builds that page,
 * per UI_COMPONENT_SPECIFICATIONS.md#typography-components.
 *
 * `type-button`, `type-nav`, `type-footer`, and `type-form-label` are
 * intentionally NOT exposed here — they are applied directly inside
 * the Button/Header/Footer/Form component styles that use them, not
 * offered as general-purpose text utilities.
 */

.al-text-display-xl {
	font-family: var(--font-family-base);
	font-size: var(--type-display-xl-size);
	font-weight: var(--type-display-xl-weight);
	letter-spacing: var(--type-display-xl-letter-spacing);
	line-height: var(--type-display-xl-line-height);
}

.al-text-display-l {
	font-family: var(--font-family-base);
	font-size: var(--type-display-l-size);
	font-weight: var(--type-display-l-weight);
	letter-spacing: var(--type-display-l-letter-spacing);
	line-height: var(--type-display-l-line-height);
}

.al-text-h1 {
	font-family: var(--font-family-base);
	font-size: var(--type-h1-size);
	font-weight: var(--type-h1-weight);
	letter-spacing: var(--type-h1-letter-spacing);
	line-height: var(--type-h1-line-height);
}

.al-text-h2 {
	font-family: var(--font-family-base);
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	letter-spacing: var(--type-h2-letter-spacing);
	line-height: var(--type-h2-line-height);
}

.al-text-h3 {
	font-family: var(--font-family-base);
	font-size: var(--type-h3-size);
	font-weight: var(--type-h3-weight);
	letter-spacing: var(--type-h3-letter-spacing);
	line-height: var(--type-h3-line-height);
}

.al-text-h4 {
	font-family: var(--font-family-base);
	font-size: var(--type-h4-size);
	font-weight: var(--type-h4-weight);
	letter-spacing: var(--type-h4-letter-spacing);
	line-height: var(--type-h4-line-height);
}

.al-text-body-large {
	font-family: var(--font-family-base);
	font-size: var(--type-body-large-size);
	font-weight: var(--type-body-large-weight);
	letter-spacing: var(--type-body-large-letter-spacing);
	line-height: var(--type-body-large-line-height);
}

.al-text-body {
	font-family: var(--font-family-base);
	font-size: var(--type-body-size);
	font-weight: var(--type-body-weight);
	letter-spacing: var(--type-body-letter-spacing);
	line-height: var(--type-body-line-height);
}

.al-text-body-small {
	font-family: var(--font-family-base);
	font-size: var(--type-body-small-size);
	font-weight: var(--type-body-small-weight);
	letter-spacing: var(--type-body-small-letter-spacing);
	line-height: var(--type-body-small-line-height);
}

.al-text-caption {
	font-family: var(--font-family-base);
	font-size: var(--type-caption-size);
	font-weight: var(--type-caption-weight);
	letter-spacing: var(--type-caption-letter-spacing);
	line-height: var(--type-caption-line-height);
}

.al-text-label {
	font-family: var(--font-family-base);
	font-size: var(--type-label-size);
	font-weight: var(--type-label-weight);
	letter-spacing: var(--type-label-letter-spacing);
	line-height: var(--type-label-line-height);
	text-transform: var(--type-label-transform);
}

/* Phone-width display sizes — 72px/56px display steps physically
   overflow a 375–390px viewport (the hero headline crushes into the
   gutters or forces horizontal scroll). Fluid clamp() keeps the same
   tokens authoritative at tablet+ while scaling down proportionally
   on phones; floors chosen so the hero headline still outranks h1. */
@media (max-width: 767px) {
	.al-text-display-xl {
		font-size: clamp(36px, 10vw, var(--type-display-xl-size));
	}

	.al-text-display-l {
		font-size: clamp(32px, 9vw, var(--type-display-l-size));
	}
}

/* Error text — type-caption at color-error, per
   UI_COMPONENT_SPECIFICATIONS.md#typography-components. */
.al-text-error {
	font-family: var(--font-family-base);
	font-size: var(--type-caption-size);
	font-weight: var(--type-caption-weight);
	letter-spacing: var(--type-caption-letter-spacing);
	line-height: var(--type-caption-line-height);
	color: var(--color-error);
}

/* Color utilities matching the three text tiers in
   DESIGN_SYSTEM.md#section-2-color-tokens — kept here rather than in
   a separate utility file since they exist to pair with the size
   utilities above. */
.al-text-primary {
	color: var(--color-text-primary);
}

.al-text-secondary {
	color: var(--color-text-secondary);
}

.al-text-muted {
	color: var(--color-text-muted);
}