tibi-docs/src/styles/custom.css

/* Tibi Doku — Nova-angelehnt: Inter, Near-Black-Akzent, Nova-Orange als Zweitakzent.
   Hinweis: --sl-color-white/black/gray bewusst NICHT überschrieben (Starlight
   dreht sie je Theme, eigenes Mapping zerstört Kontraste auf Buttons/Nav). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --sl-font: 'Inter', system-ui, -apple-system, sans-serif;

  /* Akzent-Skala: Text-Akzent muss auf Weiß lesbar sein → dunkel */
  --sl-color-accent-low: #e8eaed;
  --sl-color-accent: #374151;
  --sl-color-accent-high: #111827;

  /* Nova-Farben nur als Deko, nie als Textfarbe auf hellem Grund */
  --tibi-nova: #c2410c;
  --tibi-nova-core: #4da8b8;
  --tibi-nova-outer: #dc2626;
  --tibi-sidebar: #f8f9fa;
  --tibi-topbar: #ffffff;
  --tibi-card-border: #e5e7eb;

  /* Inline-Code-Chips (hell): Grau mit Rahmen statt Flaeche ohne Kante */
  --tibi-inline-bg: #dde2ea;
  --tibi-inline-border: #b9c1cd;
  --tibi-inline-text: #0f172a;
}

:root[data-theme='dark'] {
  /* Auf dunklem Grund muss Text-Akzent hell sein */
  --sl-color-accent-low: #2b3138;
  --sl-color-accent: #9aa4b2;
  --sl-color-accent-high: #e5e7eb;

  --tibi-sidebar: #16181d;
  --tibi-topbar: #16181d;
  --tibi-card-border: #333a44;

  /* Inline-Code-Chips (dunkel): deutlich abgesetzt vom Seitenhintergrund (#16181d) */
  --tibi-inline-bg: #49525f;
  --tibi-inline-border: #6b7686;
  --tibi-inline-text: #ffffff;
}

/* ---------- Flächen in Nova-Nähe ---------- */
.sidebar-pane {
  background-color: var(--tibi-sidebar);
}
.header {
  background-color: var(--tibi-topbar);
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(194, 65, 12, 0.1), transparent),
    radial-gradient(ellipse 40% 30% at 50% 0%, rgba(77, 168, 184, 0.07), transparent),
    radial-gradient(ellipse 25% 20% at 70% 0%, rgba(220, 38, 38, 0.05), transparent);
}
:root[data-theme='dark'] .hero {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(194, 65, 12, 0.16), transparent),
    radial-gradient(ellipse 40% 30% at 50% 0%, rgba(77, 168, 184, 0.1), transparent);
}
.hero img {
  border: 1px solid var(--tibi-card-border);
  border-radius: 0.75rem;
  box-shadow: 0 20px 50px -20px rgba(17, 24, 39, 0.35);
  max-width: min(100%, 45rem);
}

/* Inhaltsbilder (z. B. Startseiten-Screenshot): gerahmt, zentriert */
.sl-markdown-content p > img:only-child {
  border: 1px solid var(--tibi-card-border);
  border-radius: 0.75rem;
  box-shadow: 0 24px 60px -24px rgba(17, 24, 39, 0.4);
  display: block;
  margin: 0 auto;
  max-width: min(100%, 58rem);
}

/* ---------- Buttons: immer lesbar, Nova-Nähe ---------- */
.sl-link-button.primary {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}
.sl-link-button.primary:hover {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}
.sl-link-button.minimal,
.sl-link-button.secondary {
  color: #111827;
}
.sl-link-button.minimal:hover,
.sl-link-button.secondary:hover {
  color: #c2410c;
}
:root[data-theme='dark'] .sl-link-button.primary {
  background: #e5e7eb;
  border-color: #e5e7eb;
  color: #111827;
}
:root[data-theme='dark'] .sl-link-button.primary:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #111827;
}
:root[data-theme='dark'] .sl-link-button.minimal,
:root[data-theme='dark'] .sl-link-button.secondary {
  color: #e5e7eb;
}
:root[data-theme='dark'] .sl-link-button.minimal:hover,
:root[data-theme='dark'] .sl-link-button.secondary:hover {
  color: #fcd34d;
}

/* ---------- Karten: ruhig, Nova-Rahmen, Orange nur bei Hover ----------
   (gilt für LinkCards; normale Cards erben Rahmen über Starlight-Default) ---------- */
.sl-link-card {
  border-color: var(--tibi-card-border);
}
.sl-link-card:hover {
  border-color: var(--tibi-nova);
}

/* ---------- Inline-Code: eigenstaendige Chips, auch im Dark Mode lesbar ----------
   Starlight faerbt Inline-Code nur mit --sl-color-bg-inline-code (gray-5/gray-6).
   Im Dark Mode liegt das zu nah am Seitenhintergrund, deshalb fester Rahmen,
   eigene Textfarbe und mehr Innenabstand. Betrifft nur Inline-Code — Codebloecke
   (Expressive Code) bleiben unberuehrt, weil `pre > code` nicht adressiert wird. */
.sl-markdown-content :not(pre) > code:not(:where(.not-content *)) {
  background-color: var(--tibi-inline-bg);
  border: 1px solid var(--tibi-inline-border);
  border-radius: 0.3rem;
  color: var(--tibi-inline-text);
  font-weight: 500;
  padding: 0.12em 0.4em;
}

/* Methoden-/Status-Spalten (etwa `GET`, `POST`, `404`) umbrechen nicht mitten im Wort */
.sl-markdown-content td:first-child code:not(:where(.not-content *)) {
  white-space: nowrap;
}