body {
  font-family: var(--sv-font-main);
  font-size: var(--sv-text-base);
  font-weight: var(--sv-font-weight-regular);
  line-height: var(--sv-leading-body);
  letter-spacing: var(--sv-tracking-body);
  color: var(--sv-color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--sv-color-text);
  font-weight: var(--sv-font-weight-medium);
  line-height: var(--sv-leading-tight);
  letter-spacing: var(--sv-tracking-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--sv-text-hero);
}

h2 {
  font-size: var(--sv-text-2xl);
}

h3 {
  font-size: var(--sv-text-xl);
}

h4 {
  font-size: var(--sv-text-lg);
}

h5 {
  font-size: var(--sv-text-base);
}

h6 {
  font-size: var(--sv-text-md);
}

p {
  margin: 0;
  color: var(--sv-color-muted);
  line-height: var(--sv-leading-body);
  text-wrap: pretty;
}

small {
  font-size: var(--sv-text-sm);
}

strong,
b {
  font-weight: var(--sv-font-weight-bold);
}

em,
i {
  font-style: italic;
}

label {
  display: inline-block;
  color: var(--sv-color-text);
  font-size: var(--sv-text-sm);
  font-weight: var(--sv-font-weight-medium);
}

code,
pre,
kbd,
samp {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
}

code {
  padding: .18em .4em;
  border: var(--sv-border-soft);
  border-radius: var(--sv-radius-xs);
  background: rgba(255,255,255,.05);
  color: var(--sv-color-text);
  font-size: .92em;
}

pre {
  overflow: auto;
  padding: var(--sv-space-4);
  border: var(--sv-border-soft);
  border-radius: var(--sv-radius-md);
  background: rgba(255,255,255,.04);
}

pre code {
  padding: 0;
  border: 0;
  background: transparent;
}

blockquote {
  padding-left: var(--sv-space-4);
  border-left: 2px solid var(--sv-color-accent);
  color: var(--sv-color-muted);
}

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

.text-soft {
  color: var(--sv-color-soft);
}

.text-accent {
  color: var(--sv-color-accent);
}

.text-center {
  text-align: center;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}