/* mille docs — Minimalism & Swiss Style */
/* JetBrains Mono (headings/code) + IBM Plex Sans (body) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Typography */
  --sl-font: 'IBM Plex Sans', system-ui, sans-serif;
  --sl-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Brand colors — light mode */
  --sl-color-accent-low: #dbeafe;
  --sl-color-accent: #2563eb;
  --sl-color-accent-high: #1d4ed8;

  /* Text */
  --sl-color-white: #1e293b;
  --sl-color-gray-1: #334155;
  --sl-color-gray-2: #475569;
  --sl-color-gray-3: #64748b;
  --sl-color-gray-4: #94a3b8;
  --sl-color-gray-5: #cbd5e1;
  --sl-color-gray-6: #f1f5f9;
  --sl-color-black: #f8fafc;

  /* Sidebar */
  --sl-sidebar-width: 18rem;
}

/* Dark mode overrides */
:root[data-theme='dark'] {
  --sl-color-accent-low: #1e3a5f;
  --sl-color-accent: #3b82f6;
  --sl-color-accent-high: #60a5fa;
  --sl-color-white: #f1f5f9;
  --sl-color-gray-1: #e2e8f0;
  --sl-color-gray-2: #cbd5e1;
  --sl-color-gray-3: #94a3b8;
  --sl-color-gray-4: #64748b;
  --sl-color-gray-5: #334155;
  --sl-color-gray-6: #1e293b;
  --sl-color-black: #0f172a;
}

/* Headings use JetBrains Mono */
h1, h2, h3, h4, h5, h6,
.sl-markdown-content h1,
.sl-markdown-content h2,
.sl-markdown-content h3 {
  font-family: var(--sl-font-mono);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Site title in header */
.site-title {
  font-family: var(--sl-font-mono);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Clean hero section */
.hero > .hero-html {
  gap: 1.5rem;
}

/* Code blocks */
.sl-markdown-content pre,
.sl-markdown-content code {
  font-family: var(--sl-font-mono);
  font-size: 0.875rem;
}

/* Inline code */
.sl-markdown-content :not(pre) > code {
  background-color: var(--sl-color-gray-6);
  border: 1px solid var(--sl-color-gray-5);
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.8125rem;
}

/* Table styling */
.sl-markdown-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.sl-markdown-content th {
  font-family: var(--sl-font-mono);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--sl-color-gray-6);
}

.sl-markdown-content td,
.sl-markdown-content th {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--sl-color-gray-5);
}

.sl-markdown-content tr:hover td {
  background-color: var(--sl-color-gray-6);
  transition: background-color 200ms;
}

/* Smooth transitions on interactive elements */
a,
button,
.sidebar-item {
  transition: color 200ms, background-color 200ms, border-color 200ms;
}

/* Accessible focus rings */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--sl-color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
