@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════════════
   dtoolkit Starlight theme — light only
   Uses the landing's oklch palette verbatim.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts ──────────────────────────────────────────────────── */
:root,
:root[data-theme='light'] {
  --sl-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sl-font-system: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sl-font-system-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;

  --sl-content-width: 50rem;
  --sl-nav-height: 57px;

  --sl-text-body: 1rem;
  --sl-text-h1: 2.25rem;
  --sl-text-h2: 1.75rem;
  --sl-text-h3: 1.375rem;
  --sl-text-h4: 1.125rem;
  --sl-line-height-headings: 1.2;
}

/* ── Colors ─────────────────────────────────────────────────── */
:root,
:root[data-theme='light'],
[data-theme='light'] ::backdrop {
  --sl-color-accent-low: oklch(0.94 0.06 270);
  --sl-color-accent: oklch(0.50 0.22 270);
  --sl-color-accent-high: oklch(0.36 0.18 270);

  --sl-color-white: oklch(0.20 0.06 252);
  --sl-color-gray-1: oklch(0.30 0.05 252);
  --sl-color-gray-2: oklch(0.42 0.05 250);
  --sl-color-gray-3: oklch(0.54 0.04 250);
  --sl-color-gray-4: oklch(0.60 0.04 248);
  --sl-color-gray-5: oklch(0.87 0.018 248);
  --sl-color-gray-6: oklch(0.92 0.01 248);
  --sl-color-gray-7: oklch(0.965 0.008 248);
  --sl-color-black: oklch(1 0 0);

  --sl-color-bg: oklch(1 0 0);
  --sl-color-bg-nav: oklch(0.965 0.008 248 / 0.88);
  --sl-color-bg-sidebar: transparent;
  --sl-color-bg-inline-code: oklch(0.95 0.01 248);
  --sl-color-hairline: oklch(0.92 0.01 248);
  --sl-color-hairline-light: oklch(0.92 0.01 248);
  --sl-color-hairline-shade: oklch(0.92 0.01 248);
  --sl-color-text: oklch(0.42 0.05 250);
  --sl-color-text-accent: oklch(0.50 0.22 270);
  --sl-color-text-invert: oklch(1 0 0);
  --sl-color-backdrop-overlay: oklch(0.20 0.06 252 / 0.4);
}

/* ── Page layout — match landing max-w-7xl (80rem) ──────────── */
body {
  background: oklch(0.965 0.008 248) !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(oklch(0.92 0.01 248) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.92 0.01 248) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.5;
}

.page {
  position: relative;
  z-index: 1;
}

.page {
  max-width: 80rem;
  margin-inline: auto;
}

/* Header: fixed to viewport top, but content constrained to 80rem */
.page > .header {
  left: 50% !important;
  transform: translateX(-50%);
  height: var(--sl-nav-height);
  backdrop-filter: blur(16px) saturate(1.6);
}

/* Sidebar: position relative to the 80rem container, not the viewport */
@media (min-width: 50rem) {
  .sidebar-pane {
    left: auto !important;
    inset-inline-start: auto !important;
  }
}

/* ── Sidebar ────────────────────────────────────────────────── */
[aria-current='page'],
[data-current='true'] {
  --sl-color-text-accent: oklch(0.50 0.22 270);
  font-weight: 600 !important;
}

.top-level > li > details > summary span,
.top-level > li > details > summary {
  text-transform: uppercase;
  font-size: 0.6875rem !important;
  letter-spacing: 0.08em;
  font-weight: 700 !important;
  color: oklch(0.42 0.05 250);
}

/* ── Content typography — match landing text vars ───────────── */
/* Landing: --text oklch(0.20), --text-2 oklch(0.42), --text-3 oklch(0.60) */
.sl-markdown-content {
  line-height: 1.75;
  color: oklch(0.42 0.05 250);
}

.sl-markdown-content h1 {
  font-weight: 900;
  letter-spacing: -0.03em;
  color: oklch(0.15 0.06 252);
  font-size: var(--sl-text-4xl);
}

.sl-markdown-content h2 {
  font-weight: 800;
  letter-spacing: -0.025em;
  color: oklch(0.18 0.06 252);
  margin-top: 2.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid oklch(0.92 0.01 248);
}

.sl-markdown-content h3 {
  font-weight: 700;
  letter-spacing: -0.015em;
  color: oklch(0.22 0.06 252);
}

.sl-markdown-content strong {
  color: oklch(0.20 0.06 252);
}

.sl-markdown-content :not(pre) > code {
  background: oklch(0.95 0.01 248);
  padding: 0.15em 0.4em;
  border-radius: 0.375rem;
  font-size: 0.875em;
  font-weight: 500;
  color: oklch(0.40 0.15 270);
}

.sl-markdown-content a:not([class]) {
  color: oklch(0.50 0.22 270);
  text-decoration-color: oklch(0.50 0.22 270 / 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.sl-markdown-content a:not([class]):hover {
  text-decoration-color: oklch(0.50 0.22 270);
}

/* ── Code blocks — match landing .code-block ────────────────── */
.expressive-code pre {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 0.875rem !important;
  line-height: 1.625 !important;
  padding: 1.25rem !important;
}

/* Terminal header: dots left, title right of dots (not centered) */
.expressive-code .frame.is-terminal .header {
  justify-content: flex-start !important;
  gap: 0.75rem;
  padding-block: 0.5rem !important;
  padding-inline: 1rem !important;
  font-size: 0.8125rem !important;
  color: #9ca3af !important;
}

/* Subtle separator */
.expressive-code .frame.is-terminal .header::after {
  border-bottom-color: #1e293b !important;
}

/* Colored dots: small, matching landing */
.expressive-code .frame.is-terminal .header::before {
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50%;
  background: #ff5f56 !important;
  box-shadow: 14px 0 0 #ffbd2e, 28px 0 0 #27c93f;
  position: relative !important;
  left: 0 !important;
  flex-shrink: 0;
}

/* Title positioned after dots */
.expressive-code .frame.is-terminal .title {
  order: 0;
  margin-left: 1.5rem;
}

.expressive-code .copy button {
  background: #1e293b !important;
  border-radius: 0.375rem !important;
}
.expressive-code .copy button:hover {
  background: #334155 !important;
}

/* ── Asides ─────────────────────────────────────────────────── */
.starlight-aside {
  border-radius: 0.625rem;
  border-left-width: 3px;
}

/* ── Pagination ─────────────────────────────────────────────── */
.pagination-links {
  margin-top: 3rem !important;
  padding-top: 2rem;
  border-top: 1px solid oklch(0.92 0.01 248);
}

.pagination-links a {
  border: 1px solid oklch(0.90 0.015 248) !important;
  border-radius: 0.75rem !important;
  background: oklch(1 0 0 / 0.7) !important;
  backdrop-filter: blur(8px);
  padding: 1.25rem 1.5rem !important;
  box-shadow: 0 1px 3px oklch(0.20 0.06 252 / 0.04) !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.pagination-links a:hover {
  border-color: oklch(0.50 0.22 270 / 0.4) !important;
  background: oklch(1 0 0 / 0.9) !important;
  box-shadow: 0 2px 8px oklch(0.50 0.22 270 / 0.08) !important;
}

.pagination-links .link-title {
  font-weight: 700 !important;
  font-size: var(--sl-text-lg) !important;
  color: oklch(0.20 0.06 252) !important;
}

.pagination-links a:hover .link-title {
  color: oklch(0.50 0.22 270) !important;
}

.pagination-links svg {
  color: oklch(0.60 0.04 248);
  transition: color 0.2s;
}

.pagination-links a:hover svg {
  color: oklch(0.50 0.22 270);
}

/* ── Tabs ────────────────────────────────────────────────────── */
starlight-tabs [role='tab'][aria-selected='true'] {
  color: oklch(0.50 0.22 270);
  border-color: oklch(0.50 0.22 270);
  font-weight: 600;
}

/* ── Selection ──────────────────────────────────────────────── */
::selection {
  background: oklch(0.50 0.22 270 / 0.15);
  color: oklch(0.36 0.18 270);
}

/* ── Search input ───────────────────────────────────────────── */
site-search button[data-open-modal] {
  min-width: 14rem !important;
}
