/* ============================================================
   SLIM Documentation Theme — JellyRoll design tokens applied
   to Sphinx-generated HTML.
   ============================================================ */

@import url("jellyroll-fonts.css");
@import url("jellyroll-tokens.css");

/* ─── Reset Sphinx/Alabaster defaults ─────────────────────── */
body {
  font-family: var(--font-sans) !important;
  font-size: var(--type-body-size) !important;
  line-height: var(--type-body-line) !important;
  color: var(--color-text-body) !important;
  background: var(--color-surface-primary) !important;
  margin: 0;
  padding: var(--space-6);
}

/* ─── Typography ───────────────────────────────────────────── */
h1, .section > h1 {
  font: var(--type-heading-weight) var(--type-heading-size)/var(--type-heading-line) var(--font-sans) !important;
  color: var(--color-text-heading) !important;
  margin: var(--space-8) 0 var(--space-4) 0 !important;
  border-bottom: none !important;
}

h2, .section > h2 {
  font: var(--type-subheading-weight) var(--type-subheading-size)/var(--type-subheading-line) var(--font-sans) !important;
  color: var(--color-text-heading) !important;
  margin: var(--space-6) 0 var(--space-3) 0 !important;
  border-bottom: none !important;
}

h3, .section > h3 {
  font: var(--type-cardtitle-weight) var(--type-cardtitle-size)/var(--type-cardtitle-line) var(--font-sans) !important;
  color: var(--color-text-heading) !important;
  margin: var(--space-5) 0 var(--space-2) 0 !important;
}

h4 {
  font: var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-sans) !important;
  color: var(--color-text-heading) !important;
  margin: var(--space-4) 0 var(--space-2) 0 !important;
}

p {
  margin: 0 0 var(--space-4) 0 !important;
}

strong, b {
  font-weight: 800 !important;
}

em, i {
  font-style: italic;
}

/* ─── Links ────────────────────────────────────────────────── */
a {
  color: var(--color-text-link) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--color-text-link-hover) !important;
  text-decoration: underline !important;
}

a:visited {
  color: var(--color-text-link-visited) !important;
}

/* ─── Code blocks ──────────────────────────────────────────── */
code, .code, pre {
  font-family: var(--font-mono) !important;
  font-size: var(--type-small-size) !important;
  line-height: var(--type-small-line) !important;
  background: var(--color-background-subtle) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--radius-xs) !important;
}

code {
  padding: 2px 6px !important;
}

pre {
  padding: var(--space-4) !important;
  margin: var(--space-4) 0 !important;
  overflow-x: auto;
}

/* ─── Lists ────────────────────────────────────────────────── */
ul, ol {
  margin: 0 0 var(--space-4) 0 !important;
  padding-left: var(--space-6) !important;
}

li {
  margin-bottom: var(--space-2) !important;
}

/* ─── Tables ───────────────────────────────────────────────── */
table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-4) 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

th {
  background: var(--color-surface-sunken);
  font: var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-sans) !important;
  color: var(--color-text-body) !important;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

tr:last-child td {
  border-bottom: none;
}

/* ─── Admonitions (notes, warnings, etc.) ──────────────────── */
.admonition {
  padding: var(--space-4);
  margin: var(--space-4) 0;
  border-left: 4px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
}

.admonition.note {
  border-left-color: var(--color-border-information);
  background: var(--color-background-information);
}

.admonition.warning {
  border-left-color: var(--color-border-warning);
  background: var(--color-background-warning);
}

.admonition.danger {
  border-left-color: var(--color-border-alert);
  background: var(--color-background-alert);
}

.admonition.tip {
  border-left-color: var(--color-border-success);
  background: var(--color-background-success);
}

.admonition-title {
  font: var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-sans) !important;
  margin-bottom: var(--space-2) !important;
}

/* ─── Sidebar / TOC navigation ────────────────────────────── */
/* Alabaster gives .sphinxsidebar a fixed width and sets bodywrapper's
   left margin to match it, so padding here would widen the box past
   where the body starts and overlap it. Pad the inner wrapper instead —
   which is what Alabaster itself does. Sidebar width is set via
   html_theme_options in conf.py, not here. */
.sphinxsidebar {
  box-sizing: border-box;
  background: var(--color-surface-sunken) !important;
  border-right: 1px solid var(--color-border-subtle) !important;
  padding: 0 !important;
  /* Below the page_width breakpoint Alabaster stacks the sidebar and sets
     a dark background with color: #FFF. We keep the light background in
     both layouts, so the text colour has to be pinned or it goes white
     on light. */
  color: var(--color-text-body) !important;
}

.sphinxsidebarwrapper {
  padding: var(--space-6) !important;
}

.sphinxsidebar h3 {
  font: var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-sans) !important;
  color: var(--color-text-subtle) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3) !important;
}

.sphinxsidebar ul {
  list-style: none !important;
  padding-left: 0 !important;
}

.sphinxsidebar li {
  margin-bottom: var(--space-2) !important;
}

.sphinxsidebar a {
  display: block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  transition: background var(--duration-fast) var(--ease-standard);
}

.sphinxsidebar a:hover {
  background: var(--color-interaction-hovered) !important;
  text-decoration: none !important;
}

.sphinxsidebar a.current {
  background: var(--color-interaction-selected) !important;
  color: var(--color-text-selected) !important;
  font-weight: 800;
}

/* ─── Images ───────────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
}

/* ─── Figures ──────────────────────────────────────────────── */
.figure {
  margin: var(--space-6) 0;
  text-align: center;
}

.figure .caption {
  font-size: var(--type-small-size);
  color: var(--color-text-subtle);
  margin-top: var(--space-2);
}

/* ─── Document content wrapper ────────────────────────────── */
/* Page width is set via html_theme_options.page_width in conf.py.
   A max-width here cannot widen Alabaster's fixed `div.document`
   width, so overriding it in CSS silently does nothing. */
.documentwrapper {
  background: var(--color-surface-primary);
}

/* ─── Footer ───────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--space-6) 0;
  margin-top: var(--space-10);
  color: var(--color-text-subtle);
  font-size: var(--type-small-size);
}