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

/* Main theme colors */
:root {
  --primary-color: #8257FF;
  --hightlight-color: #BA68C8;
  --text-color: #111827;
  --text-highlight: #ffffff;
  --background-color: #ffffff;
  --color-highlight: rgb(124 58 237); /* violet-600 */
  --color-highlight-bg: rgb(245 243 255); /* violet-50 */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Elements overrides */
.sl-elements {
  --color-canvas: var(--background-color);
  --color-primary: var(--primary-color);
  --color-secondary: var(--primary-color);
  --color-text-body: var(--text-color);
  --color-text-heading: var(--text-color);

  /* Typography */
  font-family: var(--font-family);
}

/* Headers */
.sl-elements h1,
.sl-elements h2,
.sl-elements h3 {
  font-family: var(--font-family);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Body text */
.sl-elements p,
.sl-elements li {
  font-family: var(--font-family);
  font-weight: 400;
  line-height: 1.5;
}

/* Navigation and labels */
.sl-elements .sl-nav,
.sl-elements label,
.sl-elements .sl-text-sm {
  font-family: var(--font-family);
  font-weight: 500;
}

/* Buttons */
.sl-elements button {
  font-family: var(--font-family);
  font-weight: 500;
  color: #ffffff;
  background-color: var(--primary-color);
  border-radius: 9999px;
  padding: 0.5rem 1.5rem;
}

/* Code blocks */
.sl-elements pre,
.sl-elements code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background-color: #f9fafb;
}

/* Method badges (GET, POST, etc) */
.sl-elements .sl-method {
  font-family: var(--font-family);
  font-weight: 500;
  border-radius: 0.25rem;
}


/* Dark mode styles */
:is(.dark .sl-nav-item.active) {
  background-color: rgba(30, 41, 59, .5);
  --tw-text-opacity: 1;
  color: rgb(167 139 250/var(--tw-text-opacity));
}


.sl-bg-primary-tint {
  background-color: var(--color-highlight) !important;
  /* background-color: var(--primary-color) !important; */
  color: var(--text-highlight) !important;
}

/* Hide Stoplight branding */
.sl-elements a[href*="powered-by&utm"],
.sl-elements [data-powered-by="stoplight"],
.sl-elements .sl-flex.sl-items-center.sl-px-4.sl-py-3 {
  display: none !important;
}

/* Reponse Styling */
.sl-elements .sl-inverted .sl-code-viewer {
  background-color: var(--color-canvas-100) !important;
  color: inherit !important;
}