/* ============================================================
   Base
   ============================================================ */

h1 {
  font-size: var(--ui-font-size-display);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-line-height-tight);
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--ui-font-size-3xl);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-line-height-tight);
  letter-spacing: -0.01em;
}
h3 {
  font-size: var(--ui-font-size-2xl);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-tight);
}
h4 {
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-tight);
}
h5 {
  font-size: var(--ui-font-size-l);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--ui-line-height-tight);
}
h6 {
  font-size: var(--ui-font-size-m);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--ui-line-height-tight);
}
.ui-text {
  font-size: var(--ui-font-size-m);
  line-height: var(--ui-line-height-normal);
}
.ui-text\@xs {
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-normal);
}
.ui-text\@s {
  font-size: var(--ui-font-size-s);
  line-height: var(--ui-line-height-normal);
}
.ui-text\@l {
  font-size: var(--ui-font-size-l);
  line-height: var(--ui-line-height-normal);
}
.ui-text\@xl {
  font-size: var(--ui-font-size-xl);
  line-height: var(--ui-line-height-normal);
}
.ui-text\@2xl {
  font-size: var(--ui-font-size-2xl);
  line-height: var(--ui-line-height-normal);
}
.ui-text\@3xl {
  font-size: var(--ui-font-size-3xl);
  line-height: var(--ui-line-height-normal);
}

.ui-text\:muted {
  color: var(--ui-color-text-muted);
}
.ui-text\:default {
  color: var(--ui-color-text);
}
.ui-text\:primary {
  color: var(--color-primary);
}
.ui-text\:secondary {
  color: var(--color-secondary);
}
.ui-text\:success {
  color: var(--color-success);
}
.ui-text\:warning {
  color: var(--color-warning);
}
.ui-text\:danger {
  color: var(--color-danger);
}
.ui-text\:info {
  color: var(--color-info);
}
.ui-text\:brand {
  color: var(--color-brand);
}
.ui-text\:accent {
  color: var(--color-accent);
}
.ui-text\:white {
  color: var(--color-white);
}
.ui-text\:black {
  color: var(--color-black);
}

.ui-text-weight-normal {
  font-weight: var(--ui-font-weight-normal);
}
.ui-text-weight-medium {
  font-weight: var(--ui-font-weight-medium);
}
.ui-text-weight-semibold {
  font-weight: var(--ui-font-weight-semibold);
}
.ui-text-weight-bold {
  font-weight: var(--ui-font-weight-bold);
}

.ui-link {
  color: var(--color-primary);
  text-decoration: none;
}
.ui-link:hover {
  text-decoration: underline;
}

.ui-link\:muted {
  color: var(--ui-color-text-muted);
}
.ui-link\:default {
  color: var(--ui-color-text);
}
.ui-link\:primary {
  color: var(--color-primary);
}
.ui-link\:secondary {
  color: var(--color-secondary);
}
.ui-link\:success {
  color: var(--color-success);
}
.ui-link\:warning {
  color: var(--color-warning);
}
.ui-link\:danger {
  color: var(--color-danger);
}
.ui-link\:info {
  color: var(--color-info);
}
.ui-link\:brand {
  color: var(--color-brand);
}
.ui-link\:accent {
  color: var(--color-accent);
}

.ui-code {
  font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125em;
  padding: 0.15em 0.4em;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--ui-color-surface-alt, var(--ui-color-border)));
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius: 3px;
}

.ui-codeblock {
  font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.75;
  background: #0f1117;
  color: #e2e8f0;
  border: 1px solid #1e2433;
  border-radius: var(--ui-radius-m);
  overflow-x: auto;
  white-space: pre;
  display: block;
  margin: 0;
  /* top padding leaves room for the chrome bar */
  padding: 3.5rem 1.5rem 1.25rem;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,.22), 0 1.5px 4px rgba(0,0,0,.12);
}

/* Faux editor chrome bar */
.ui-codeblock::before {
  content: '\2022\00a0\00a0\2022\00a0\00a0\2022';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.25rem;
  line-height: 2.25rem;
  padding: 0 1rem;
  font-size: 1.25rem;
  letter-spacing: .1em;
  color: #3d4557;
  background: #181d2a;
  border-bottom: 1px solid #1e2433;
  border-radius: var(--ui-radius-m) var(--ui-radius-m) 0 0;
  pointer-events: none;
}

.ui-blockquote {
  border-left: 4px solid var(--color-primary);
  padding: var(--ui-space-3) var(--ui-space-4);
  margin: var(--ui-space-4) 0;
  color: var(--ui-color-text-muted);
  font-style: italic;
  background: var(--ui-color-surface);
}
.ui-list {
  list-style: disc;
  padding-left: 1.5em;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  font-size: var(--ui-font-size-m);
  line-height: var(--ui-line-height-normal);
}
.ui-list\@xs {
  font-size: var(--ui-font-size-xs);
}
.ui-list\@s {
  font-size: var(--ui-font-size-s);
}
.ui-list\@l {
  font-size: var(--ui-font-size-l);
}
.ui-list\@xl {
  font-size: var(--ui-font-size-xl);
}