html, body {
  font-family: var(--cx-font-body);
  font-size: var(--cx-text-base);
  line-height: var(--cx-leading-normal);
  color: var(--cx-steel-900);
  background: var(--cx-slate-50);
}

/* Headings */
h1 {
  font-size: var(--cx-text-4xl);
  font-weight: 700;
  margin-bottom: var(--cx-space-4);
}

h2 {
  font-size: var(--cx-text-3xl);
  font-weight: 600;
  margin-bottom: var(--cx-space-3);
}

h3 {
  font-size: var(--cx-text-2xl);
  font-weight: 600;
  margin-bottom: var(--cx-space-2);
}

h4 {
  font-size: var(--cx-text-xl);
  font-weight: 600;
}

/* Body */
p {
  margin-bottom: var(--cx-space-4);
  color: var(--cx-slate-500);
}

/* Utilities */
.text-muted { color: var(--cx-slate-500); }
.text-center { text-align: center; }
.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}