/* User Provided Stylesheet */

/* custom-style.css */

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

:root {
  /* HHU Corporate Identity Colors */
  --hhu-blue: #006AB3;
  --hhu-dark-blue: #003964;
  --hhu-ice-blue: #B5CBD6;
  --hhu-text: #000000;

  --hhu-green: #8CB110;
  --hhu-red: #BE0A26;
  --hhu-orange: #EE7F00;
}

/* --- Markenfarbe dieses Skripts ---------------------------------------------------
   oklch(0.52 0.12 195) = #007d7e. Weisse Schrift darauf erfuellt WCAG AA.
   Die HHU-Hausfarben bleiben, was sie sind -- Farben fuer Abbildungen und fuer die
   Signal-Admonitions (Tipp gruen, Warnung orange, Gefahr rot). Die Markenfarbe ist
   der Akzent des Buches: Links, aktive Navigation, Codeblock-Kante, Notiz/Info. */
:root {
  --brand: #007d7e;          /* oklch(0.52 0.12 195) -- Petrol */
  --brand-tint: #d8f5f5;      /* oklch(0.95 0.03 195) -- helle Flaeche */
  --brand-dark: #2cc5c5;      /* oklch(0.75 0.12 195) -- Akzent im Dunkelmodus */
}
@media (prefers-color-scheme: dark) {
  :root { --brand: var(--brand-dark); }
}

/* 1. Typography Overrides */
body {
  font-family: 'Inter', sans-serif;
  color: var(--hhu-text);
}

code, kbd, samp, pre, .math-display {
  font-family: 'JetBrains Mono', monospace !important;
}

/* Ueberschriften bleiben beim Fast-Schwarz des Themes: das Theme setzt sie ueber
   Tailwind-Klassen, ein Farbwunsch hier braeuchte !important und muesste den Dunkelmodus
   gleich mitbauen. Die Marke zeigt sich in den Akzenten (Links, Code, Notiz-Kasten),
   der Fliesstext bleibt schwarz -- dieselbe Haltung wie auf der Website. */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

/* 2. Links & Navigation -- Markenfarbe.
   Das Theme faerbt Inhaltslinks ueber die Klasse `link` (Tailwind blue-700); ein blosses
   `a { color: ... }` verliert dagegen an Spezifitaet und bleibt wirkungslos -- genau das
   war hier bis 2026-09-24 der Fall. Navigation und Kopfzeile bleiben absichtlich neutral,
   sonst leuchtet die halbe Seite. */
a.link, article a.link, .myst-content a.link {
  color: var(--brand) !important;
  text-decoration-color: color-mix(in oklab, var(--brand) 30%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a.link:hover, article a.link:hover {
  color: color-mix(in oklab, var(--brand) 75%, black) !important;
}

nav.myst-toc a.active {
  color: var(--brand) !important;
  border-left-color: var(--brand) !important;
  font-weight: 600;
}

/* 3. Structural Elements & Code Blocks */
div.myst-code {
  border-left-color: var(--brand) !important;
  border-left-width: 3px !important;
}

p > code, li > code, td > code {
  background-color: var(--brand-tint) !important;
  color: color-mix(in oklab, var(--brand) 80%, black) !important;
  border-radius: 3px;
  padding: 0.1rem 0.3rem;
}

/* 4. Minimalist Admonitions: Notiz/Info in der Markenfarbe, Signale in HHU-Farben */
aside.myst-admonition {
  background-color: transparent !important;
  border: 1px solid #e5e7eb !important;
  border-left-width: 4px !important;
}

aside.myst-admonition-note, aside.myst-admonition-info {
  border-left-color: var(--brand) !important;
}
aside.myst-admonition-note > header, aside.myst-admonition-info > header {
  color: var(--brand) !important;
}

aside.myst-admonition-tip, aside.myst-admonition-hint {
  border-left-color: var(--hhu-green) !important;
}
aside.myst-admonition-tip > header, aside.myst-admonition-hint > header {
  color: var(--hhu-green) !important;
}

aside.myst-admonition-warning {
  border-left-color: var(--hhu-orange) !important;
}
aside.myst-admonition-warning > header {
  color: var(--hhu-orange) !important;
}

aside.myst-admonition-danger, aside.myst-admonition-error {
  border-left-color: var(--hhu-red) !important;
}
aside.myst-admonition-danger > header {
  color: var(--hhu-red) !important;
}