body {
  font-family: var(--ds-font-family-base);
  font-size: var(--ds-font-size-base);
  font-weight: var(--ds-font-weight-normal);
  line-height: var(--ds-line-height-normal);
  color: var(--ds-color-text-primary);
  background-color: var(--ds-color-bg-primary);
}

h1,
.ds-heading-1 {
  font-size: var(--ds-font-size-4xl);
  font-weight: var(--ds-font-weight-bold);
  line-height: var(--ds-line-height-tight);
  letter-spacing: var(--ds-letter-spacing-tight);
  color: var(--ds-color-text-primary);
}

h2,
.ds-heading-2 {
  font-size: var(--ds-font-size-3xl);
  font-weight: var(--ds-font-weight-bold);
  line-height: var(--ds-line-height-tight);
  letter-spacing: var(--ds-letter-spacing-tight);
  color: var(--ds-color-text-primary);
}

h3,
.ds-heading-3 {
  font-size: var(--ds-font-size-2xl);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ds-line-height-snug);
  letter-spacing: var(--ds-letter-spacing-normal);
  color: var(--ds-color-text-primary);
}

h4,
.ds-heading-4 {
  font-size: var(--ds-font-size-xl);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ds-line-height-snug);
  letter-spacing: var(--ds-letter-spacing-normal);
  color: var(--ds-color-text-primary);
}

h5,
.ds-heading-5 {
  font-size: var(--ds-font-size-lg);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ds-line-height-normal);
  letter-spacing: var(--ds-letter-spacing-normal);
  color: var(--ds-color-text-primary);
}

h6,
.ds-heading-6 {
  font-size: var(--ds-font-size-base);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ds-line-height-normal);
  letter-spacing: var(--ds-letter-spacing-normal);
  color: var(--ds-color-text-primary);
}

p,
.ds-body {
  font-size: var(--ds-font-size-base);
  font-weight: var(--ds-font-weight-normal);
  line-height: var(--ds-line-height-relaxed);
  color: var(--ds-color-text-primary);
}

.ds-body-sm {
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-normal);
  line-height: var(--ds-line-height-relaxed);
  color: var(--ds-color-text-secondary);
}

.ds-body-xs {
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-normal);
  line-height: var(--ds-line-height-normal);
  color: var(--ds-color-text-tertiary);
}

.ds-label {
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ds-line-height-normal);
  color: var(--ds-color-text-primary);
}

.ds-caption {
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-normal);
  line-height: var(--ds-line-height-normal);
  color: var(--ds-color-text-secondary);
}

.ds-overline {
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ds-line-height-normal);
  letter-spacing: var(--ds-letter-spacing-wider);
  text-transform: uppercase;
  color: var(--ds-color-text-tertiary);
}

.ds-code {
  font-family: var(--ds-font-family-mono);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-normal);
  line-height: var(--ds-line-height-normal);
  color: var(--ds-color-text-primary);
  background-color: var(--ds-color-bg-tertiary);
  padding: var(--ds-spacing-1) var(--ds-spacing-2);
  border-radius: var(--ds-border-radius-sm);
}

a,
.ds-link {
  color: var(--ds-color-text-link);
  transition: color var(--ds-transition-duration-fast) var(--ds-transition-easing-ease-in-out);
}

a:hover,
.ds-link:hover {
  color: var(--ds-color-text-link-hover);
}

.ds-text-primary {
  color: var(--ds-color-text-primary);
}

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

.ds-text-tertiary {
  color: var(--ds-color-text-tertiary);
}

.ds-text-disabled {
  color: var(--ds-color-text-disabled);
}

.ds-text-inverse {
  color: var(--ds-color-text-inverse);
}

.ds-text-success {
  color: var(--ds-color-state-success-text);
}

.ds-text-warning {
  color: var(--ds-color-state-warning-text);
}

.ds-text-error {
  color: var(--ds-color-state-error-text);
}

.ds-text-info {
  color: var(--ds-color-state-info-text);
}