/* Fixed rem steps respect browser text-size preferences. No viewport-based type.
   Use these utilities directly in JSX or @apply them in shared components. */
@theme {
  --text-copy: 1rem;
  --text-copy--line-height: 1.5;
  --text-caption: 0.875rem;
  --text-caption--line-height: 1.5;
  --text-ui-heading: 1.125rem;
  --text-ui-heading--line-height: 1.5;
  --text-lead: 1.25rem;
  --text-lead--line-height: 1.5;
  --text-title: 2rem;
  --text-title--line-height: 1.25;
  --text-section: 3rem;
  --text-section--line-height: 1.125;
  --text-display: 4.5rem;
  --text-display--line-height: 1.125;
}

@utility type-body { @apply text-copy; }
@utility type-small { @apply text-caption; }
@utility type-ui-heading {
  @apply text-ui-heading;
  font-family: var(--ds-sans);
  font-weight: 500;
  letter-spacing: normal;
}
@utility type-label {
  @apply text-caption;
  font-weight: 500;
  letter-spacing: 0.08em;
}
@utility type-eyebrow {
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.08em;
}
@utility type-lead { @apply text-lead; }
@utility type-title {
  @apply text-title;
  font-family: var(--ds-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
}
@utility type-section {
  @apply text-section;
  font-family: var(--ds-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  @media (max-width: 40rem) { font-size: 2.25rem; line-height: 1.25; }
}
@utility type-display {
  @apply text-display;
  font-family: var(--ds-serif);
  font-weight: 400;
  letter-spacing: -0.025em;
  @media (max-width: 40rem) { font-size: 3rem; line-height: 1.125; }
}
@utility type-control {
  font-size: 1.5rem;
  line-height: 1.25;
}