@import "@fontsource/inter/400.css";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/inter/700.css";
@import "@fontsource/jetbrains-mono/400.css";
@import "@fontsource/jetbrains-mono/500.css";

/* pg_orbit palette — deep space observation theme */
:root {
  --sl-font: "Inter", system-ui, -apple-system, sans-serif;
  --sl-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  --sl-color-accent-low: #451a03;
  --sl-color-accent: #f59e0b;
  --sl-color-accent-high: #fef3c7;

  --sl-color-white: #e2e8f0;
  --sl-color-gray-1: #cbd5e1;
  --sl-color-gray-2: #8896a8;
  --sl-color-gray-3: #556677;
  --sl-color-gray-4: #2a3f54;
  --sl-color-gray-5: #1e2d3d;
  --sl-color-gray-6: #111827;
  --sl-color-gray-7: #0a0e17;

  --sl-color-bg-nav: var(--sl-color-gray-6);
  --sl-color-bg-sidebar: var(--sl-color-gray-7);
  --sl-color-hairline-light: var(--sl-color-gray-5);
  --sl-color-hairline-shade: var(--sl-color-gray-4);
}

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

::-webkit-scrollbar-track {
  background: var(--sl-color-gray-7);
}

::-webkit-scrollbar-thumb {
  background: var(--sl-color-gray-5);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sl-color-gray-4);
}

/* Selection color with amber accent */
::selection {
  background-color: #92400e;
  color: #e2e8f0;
}

/* SQL code blocks get amber left-border accent */
pre:has(> code.language-sql) {
  border-left: 3px solid var(--sl-color-accent);
}

/* Code blocks — raised surface */
pre {
  background-color: #111827 !important;
  border: 1px solid #1e2d3d;
}

/* Sidebar section labels */
.sl-sidebar-group summary {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Hero title gradient */
.hero .hero-html h1 {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sl-color-gray-2);
  border-bottom: 1px solid var(--sl-color-gray-5);
}

td {
  border-bottom: 1px solid var(--sl-color-gray-5);
  font-size: 0.875rem;
}

tr:hover td {
  background-color: #1a2332;
}

/* Aside tweaks */
.starlight-aside--note {
  border-color: var(--sl-color-accent);
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--sl-color-accent);
  outline-offset: 2px;
}

/* Workflow comparison blocks */
.workflow-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 768px) {
  .workflow-compare {
    grid-template-columns: 1fr;
  }
}