/* =========================================================================
 *  Vulvy OTP — API Documentation
 *  Custom styles layered on top of Tailwind CSS (CDN)
 * ========================================================================= */

:root {
  --brand: #6366f1;      /* indigo-500 */
  --brand-2: #3b82f6;    /* blue-500   */
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------------ *
 *  Code blocks
 * ------------------------------------------------------------------ */
.code-box pre {
  margin: 0;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.65;
  tab-size: 2;
}
.code-box pre code { font-family: inherit; white-space: pre; }

/* thin custom scrollbar for code + sidebar */
.code-box pre::-webkit-scrollbar,
.thin-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.code-box pre::-webkit-scrollbar-thumb,
.thin-scroll::-webkit-scrollbar-thumb {
  background: rgba(120, 130, 160, 0.35);
  border-radius: 9999px;
}
.code-box pre::-webkit-scrollbar-track,
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

/* Tabbed code container: rounded card around the tab bar + panes */
.code-tabs {
  border: 1px solid rgba(148, 163, 184, 0.30);
  border-radius: 0.75rem;
  overflow: hidden;
}
html.dark .code-tabs { border-color: rgba(255, 255, 255, 0.10); }

/* ------------------------------------------------------------------ *
 *  Syntax highlight tokens (lightweight, no external library)
 * ------------------------------------------------------------------ */
.tok-key   { color: #c084fc; }  /* json keys / keywords */
.tok-str   { color: #86efac; }  /* strings */
.tok-num   { color: #fca5a5; }  /* numbers / booleans */
.tok-com   { color: #94a3b8; font-style: italic; } /* comments */
.tok-fn    { color: #7dd3fc; }  /* functions */
.tok-punc  { color: #94a3b8; }

html:not(.dark) .tok-key  { color: #9333ea; }
html:not(.dark) .tok-str  { color: #16a34a; }
html:not(.dark) .tok-num  { color: #dc2626; }
html:not(.dark) .tok-com  { color: #64748b; }
html:not(.dark) .tok-fn   { color: #0284c7; }
html:not(.dark) .tok-punc { color: #64748b; }

/* ------------------------------------------------------------------ *
 *  Utility bits
 * ------------------------------------------------------------------ */
.brand-gradient {
  background-image: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
}
.brand-text-gradient {
  background-image: linear-gradient(135deg, #818cf8 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* fade / slide animation used when switching server content */
.fade-enter { animation: fadeSlide .28s ease both; }
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* sidebar active link */
.nav-link.is-active {
  color: #4f46e5;
  background-color: rgba(99, 102, 241, 0.10);
  font-weight: 600;
}
html.dark .nav-link.is-active {
  color: #a5b4fc;
  background-color: rgba(99, 102, 241, 0.16);
}

/* keep anchor targets clear of the sticky header */
[data-section] { scroll-margin-top: 96px; }

/* toast */
.toast-pop { animation: toastIn .22s ease both; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-enter, .toast-pop { animation: none; }
}