@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Sora:wght@600;700;800&display=swap');

:root {
  --brand: #f59e0b;
  --brand-dark: #b45309;
  --ink: #18181b;
}

html {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.font-display {
  font-family: 'Sora', 'Inter', sans-serif;
}

[data-lang][hidden] {
  display: none !important;
}

.sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgb(63 63 70 / 0.6);
  border-radius: 999px;
}
.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.prose-docs p {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}
.prose-docs ul,
.prose-docs ol {
  margin: 0.5rem 0 1rem 1.25rem;
  line-height: 1.7;
}
.prose-docs ul {
  list-style: disc;
}
.prose-docs ol {
  list-style: decimal;
}
.prose-docs li {
  margin-bottom: 0.35rem;
}
.prose-docs code {
  background: rgb(24 24 27 / 0.06);
  border-radius: 0.35rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.85em;
  color: #92400e;
}

.flow-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: top;
  border-radius: 0.5rem;
  border: 1px solid rgb(228 228 231 / 0.9);
  background: #f4f4f5;
}

.gradient-hero {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(245, 158, 11, 0.35), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(180, 83, 9, 0.4), transparent 55%),
    linear-gradient(180deg, #18181b 0%, #1c1917 60%, #292524 100%);
}