/* Custom CSS extracted from the Tailwind version */

:root {
  --ink: #0b0f14;
  --panel: #161b22;
  --line: #30363d;
  --blue: #00ff8b;
  --slate: #8b949e;
}

body {
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  background-color: var(--ink);
  color: var(--slate);
}

.font-body {
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}

.font-display {
  font-family: "Space Grotesk", "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: -0.01em;
}

.bg-grid-pattern {
  background-image: linear-gradient(to right, #30363d 1px, transparent 1px),
                    linear-gradient(to bottom, #30363d 1px, transparent 1px);
  background-size: 60px 60px;
}

.bg-aurora {
  background:
    radial-gradient(circle at 20% 20%, rgba(80, 140, 110, 0.18), transparent 75%);
}

.bg-noise {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.4'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: soft-light;
  opacity: 0.22;
}

@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-gradient-flow {
  animation: gradient-flow 8s ease infinite;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Horizontal rail scrollbar */
.scrollbar-rail {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 255, 139, 0.45) rgba(13, 17, 23, 0.8);
}
.scrollbar-rail::-webkit-scrollbar {
  height: 10px;
}
.scrollbar-rail::-webkit-scrollbar-track {
  background: rgba(13, 17, 23, 0.8);
  border-radius: 999px;
}
.scrollbar-rail::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(0, 255, 139, 0.35), rgba(0, 255, 139, 0.7));
  border-radius: 999px;
  border: 2px solid rgba(13, 17, 23, 0.8);
}
.scrollbar-rail::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, rgba(0, 255, 139, 0.45), rgba(0, 255, 139, 0.85));
}

@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

.animate-float { animation: float 20s ease-in-out infinite; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb {
  background: #21262d;
  border-radius: 100px;
  border: 2px solid #0d1117;
}
::-webkit-scrollbar-thumb:hover { background: #30363d; }

/* Glass effect */
.glass-panel {
  background: rgba(22, 27, 24, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(48, 54, 56, 0.5);
}

/* Simple entrance animation helpers (since Tailwind plugin classes aren't available) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in { animation-fill-mode: both; }
.fade-in { animation-name: fadeInUp; }
.slide-in-from-bottom-8 { /* already handled in fadeInUp */ }
.duration-700 { animation-duration: 700ms; }
.fill-mode-both { animation-fill-mode: both; }

/* Clamp (Tailwind line-clamp is a plugin; add a tiny equivalent) */
.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Article typography tweaks */
.prose h2 {
  font-weight: 700;
  font-size: 1.35em;
  letter-spacing: -0.01em;
}
.prose h3 {
  font-weight: 600;
  font-size: 1.1em;
  letter-spacing: -0.005em;
  margin-top: 1.5em;
}
.prose h4 {
  font-weight: 600;
  font-size: 1em;
  letter-spacing: -0.005em;
  margin-top: 1.25em;
}
.prose h2,
.prose h3 {
  scroll-margin-top: 96px;
}
.prose p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.prose img {
  border-radius: 1rem;
  border: 1px solid #273142;
}
.prose a {
  font-weight: 700;
}

/* Docs-specific blocks */
.doc-box {
  border: 1px solid #273142;
  background: rgba(22, 27, 34, 0.4);
  border-radius: 16px;
  padding: 16px;
  margin: 16px 0;
}
.doc-box h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.doc-box h4 svg {
  flex: 0 0 auto;
}
.doc-box p:last-child {
  margin-bottom: 0;
}
.doc-tiny {
  font-size: 0.78em;
  color: #8b949e;
  margin-top: 8px;
}
.doc-tiny p {
  margin: 0;
}
.label {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #21262d;
  color: #c9d1d9;
}
.label-purple { background: #2b2440; color: #c7b2ff; }
.label-orange { background: #3b2a12; color: #ffd29d; }
.label-red { background: #3a1f1f; color: #ffb2b2; }

/* Docs nav */
.doc-nav-group {
  padding-bottom: 8px;
}
.doc-nav-title {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #8b949e;
  cursor: pointer;
  list-style: none;
  padding-right: 16px;
}
.doc-nav-title::-webkit-details-marker {
  display: none;
}
.doc-nav-title::after {
  content: '▸';
  position: absolute;
  right: 0;
  top: 0;
  color: #6b7280;
  transition: transform 200ms ease;
}
.doc-nav-group[open] > .doc-nav-title::after {
  transform: rotate(90deg);
}
.doc-nav-children {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 10px;
}
.doc-nav-link {
  text-align: left;
  font-size: 12px;
  color: #8b949e;
  transition: color 200ms ease;
}
.doc-nav-link:hover,
.doc-nav-link.is-active {
  color: #00ff8b;
}
.doc-nav-link.is-hidden {
  display: none;
}
.doc-nav-group.is-hidden {
  display: none;
}

/* Ensure green-accent fills use dark text for contrast */
.bg-\[\#00ff8b\],
.bg-\[\#00ff8b\]\/80 {
  color: #0b0f14 !important;
}
.hover\:bg-\[\#00ff8b\]:hover,
.hover\:bg-\[\#00ff8b\]\/80:hover {
  color: #0b0f14 !important;
}
.bg-\[\#00ff8b\] i,
.bg-\[\#00ff8b\] svg,
.bg-\[\#00ff8b\] img,
.bg-\[\#00ff8b\]\/80 i,
.bg-\[\#00ff8b\]\/80 svg,
.bg-\[\#00ff8b\]\/80 img {
  color: #00ff8b !important;
  fill: currentColor;
}