.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 {
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  font-weight: 600;
}
.typography h1, .h1 { font-size: 2.5rem; }
.typography h2, .h2 { font-size: 2rem; }
.typography h3, .h3 { font-size: 1.75rem; }
.typography h4, .h4 { font-size: 1.5rem; }
.typography h5, .h5 { font-size: 1.25rem; }
.typography h6, .h6 { font-size: 1rem; }

.typography p {
  margin-bottom: 1.25em;
}

.typography ul,
.typography ol {
  margin-left: 1.5rem;
  margin-bottom: 1.25em;
}
.typography ul { list-style: disc; }
.typography ol { list-style: decimal; }

/* ---- Cards ---- */
.card {
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* ---- Badge ---- */
.badge {
  display: inline-block;
  background-color: #ebf4ff;
  color: #2c5282;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  text-transform: uppercase;
}

/* ---- Form Inputs ---- */
.input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #cbd5e0;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.input:focus {
  outline: none;
  border-color: #2672ff;
  box-shadow: 0 0 0 3px rgba(38, 114, 255, 0.3);
}