/* CrawlKit API Reference — Dark Mode Theme
   Stripe/Linear-inspired dense professional layout */

:root {
  /* Dark background palette */
  --scalar-background-1: #0A0A0F;
  --scalar-background-2: #12121A;
  --scalar-background-3: #1A1A25;
  --scalar-background-4: #22222E;

  /* Text */
  --scalar-color-1: #F0F0F5;
  --scalar-color-2: #A0A0B0;
  --scalar-color-3: #707080;

  /* Accent — CrawlKit brand (orange) */
  --scalar-color-accent: #F05023;
  --scalar-color-accent-hover: #F47A56;

  /* Borders */
  --scalar-border-color: #1E1E2E;

  /* Typography */
  --scalar-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --scalar-font-code: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Density — tighter spacing */
  --scalar-radius: 4px;
  --scalar-radius-lg: 6px;
  --scalar-radius-xl: 8px;

  /* Shadows */
  --scalar-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --scalar-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Global body */
body {
  background: var(--scalar-background-1);
  color: var(--scalar-color-1);
  font-family: var(--scalar-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dense sidebar text */
.sidebar,
.sidebar-content,
[class*="sidebar"] {
  font-size: 13px;
  line-height: 1.4;
}

/* HTTP method badges — monospace */
[class*="http-method"],
[class*="badge"] {
  font-family: var(--scalar-font-code);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Code blocks — darker background */
pre,
code,
[class*="code-block"],
[class*="codeblock"] {
  font-family: var(--scalar-font-code);
  font-size: 13px;
  line-height: 1.5;
  background: #08080D;
  border: 1px solid #1E1E2E;
  border-radius: var(--scalar-radius);
}

/* Inline code */
:not(pre) > code {
  background: var(--scalar-background-3);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* Links */
a {
  color: var(--scalar-color-accent);
  text-decoration: none;
}

a:hover {
  color: var(--scalar-color-accent-hover);
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid var(--scalar-border-color);
  padding: 8px 12px;
  text-align: left;
}

th {
  background: var(--scalar-background-2);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--scalar-color-2);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--scalar-background-1);
}

::-webkit-scrollbar-thumb {
  background: var(--scalar-background-4);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3A3A4A;
}

/* Selection */
::selection {
  background: rgba(240, 80, 35, 0.3);
  color: #fff;
}

/* Input fields */
input, textarea, select {
  font-family: var(--scalar-font);
  background: var(--scalar-background-2);
  border: 1px solid var(--scalar-border-color);
  color: var(--scalar-color-1);
  border-radius: var(--scalar-radius);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--scalar-color-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(240, 80, 35, 0.2);
}

/* Buttons */
button {
  font-family: var(--scalar-font);
  font-weight: 500;
  border-radius: var(--scalar-radius);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--scalar-font);
  font-weight: 600;
  color: var(--scalar-color-1);
  letter-spacing: -0.01em;
}

/* Paragraph text */
p {
  color: var(--scalar-color-2);
  line-height: 1.6;
}

/* Mobile responsive */
@media (max-width: 768px) {
  :root {
    --scalar-radius: 6px;
  }

  body {
    font-size: 14px;
  }
}