@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Fira+Code:wght@300..700&display=swap");

/* =========================================================
   Nordic Green UI (ONLY the 5 provided colors)
   Target: MyST / MkDocs Material / Tailwind-ish utilities
   Goals:
   - No blue hover/active/focus accents anywhere
   - No violet/purple code tokens
   - No per-line code backgrounds
   - More consistent “text” color (avoid mixed white/green)
   - Slightly larger typography for readability
   ========================================================= */

/* ---------- Palette + tokens ---------- */
:root{
  --g1:#E1E6B9; /* light */
  --g2:#C4D7A4;
  --g3:#ABC8A4;
  --g4:#375D3B;
  --g5:#183128; /* dark */

  /* Light mode tokens */
  --bg:        var(--g1);
  --surface:   var(--g2);
  --surface-2: var(--g1);
  --border:    #5D7D5B;          /* was: var(--g3) — 3.57:1 on g1, passes WCAG non-text */

  --text:      var(--g5);
  --muted:     var(--g4);

  --link:      var(--g4);
  --link-hover:var(--g5);

  --code-bg:   var(--g2);
  --code-border: #6B8B69;        /* was: var(--g3) — stronger code block borders */

  /* Shadow elevation for light mode cards */
  --card-shadow: 0 2px 8px hsla(130, 20%, 30%, 0.12), 0 1px 3px hsla(130, 20%, 30%, 0.08);

  --radius: 12px;

  /* UI actions (icons/buttons) */
  --ui-action: var(--g4);
  --ui-action-hover: var(--g5);

  /* Typography scale */
  --base-font-size: 16px;
  --base-line-height: 1.6;

}

/* Dark mode tokens */
.dark,
[data-md-color-scheme="slate"],
[data-theme="dark"]{
  --bg:        #0d0d0d;
  --surface:   #2a2a2a;
  --surface-2: #1a1a1a;
  --border:    #555555;

  --text:      var(--g1);        /* brighter cream for readability */
  --muted:     var(--g2);

  --link:      var(--g3);
  --link-hover:var(--g1);

  --code-bg:   #1e1e1e;
  --code-border: #444444;

  --ui-action: var(--g3);
  --ui-action-hover: var(--g1);

  /* No shadow elevation in dark mode — borders do the work */
  --card-shadow: none;
}

/* Mermaid diagram theming — must use :root>* to beat Material's :root>* specificity */
:root>*{
  --md-mermaid-font-family: "Space Grotesk", system-ui, sans-serif;
  --md-mermaid-edge-color: var(--g4);
  --md-mermaid-node-bg-color: var(--g2);
  --md-mermaid-node-fg-color: var(--g4);
  --md-mermaid-label-bg-color: var(--g1);
  --md-mermaid-label-fg-color: var(--g5);
}
[data-md-color-scheme="slate"]:root>*,
:root>[data-md-color-scheme="slate"]{
  --md-mermaid-edge-color: #666;
  --md-mermaid-node-bg-color: #2a2a2a;
  --md-mermaid-node-fg-color: #555;
  --md-mermaid-label-bg-color: #0d0d0d;
  --md-mermaid-label-fg-color: var(--g1);
}

/* =========================================================
   Global typography
   ========================================================= */
html{
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  text-size-adjust: 100%;
}

body{
  background: var(--bg);
  color: var(--text);
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Make “fine/small” docs UI a bit larger */
.md-typeset,
.prose,
.bd-content,
main{
  font-size: 1rem;
  line-height: var(--base-line-height);
}

/* Increase reading comfort */
.md-typeset p{
  margin: 0 0 1.1rem 0;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3{
  margin-top: 1.6rem;
  margin-bottom: 0.75rem;
}

.md-typeset ul,
.md-typeset ol{
  margin: 0 0 1rem 1.25rem;
}

/* Details/summary */
.md-typeset details{
  font-size: 0.9rem;
}

.md-typeset details summary{
  font-size: 0.95rem;
  font-weight: 600;
}

/* Sticky header — ensure header stays pinned on scroll */
.md-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  background: var(--g4) !important;
  color: var(--g1) !important;
}

/* Header text and icons inherit light color */
.md-header__title,
.md-header__topic,
.md-header *{
  color: var(--g1) !important;
}

/* Search bar in header */
.md-search__input{
  background: color-mix(in srgb, var(--g5) 50%, transparent) !important;
  color: var(--g1) !important;
  border: 1px solid color-mix(in srgb, var(--g3) 50%, transparent) !important;
  border-radius: 6px;
}
.md-search__input::placeholder{
  color: var(--g3) !important;
}
.md-search__input:focus{
  background: var(--g5) !important;
  border-color: var(--g3) !important;
}

/* Navigation tabs bar */
.md-tabs{
  background: var(--g4) !important;
}
.md-tabs__link{
  color: var(--g2) !important;
}
.md-tabs__link--active,
.md-tabs__link:hover{
  color: var(--g1) !important;
}

/* Footer */
.md-footer{
  background: var(--g4) !important;
  color: var(--g1) !important;
}
.md-footer,
.md-footer *,
.md-footer__link,
.md-footer__title,
.md-footer-meta,
.md-footer-meta *,
.md-copyright,
.md-copyright *,
.md-social,
.md-social *{
  color: var(--g1) !important;
}
.md-footer a:hover,
.md-footer-meta a:hover{
  color: var(--g2) !important;
}

/* UI chrome: nav, header, sidebar, footer */
.md-header,
.md-header__title,
.md-header__topic,
.md-nav,
.md-nav__title,
.md-nav__link,
.md-sidebar,
.md-sidebar--primary,
.md-sidebar--secondary,
.md-search__input,
.md-search__form,
.md-tabs,
.md-tabs__link,
.md-footer,
.md-footer__link,
.md-footer__title,
.md-footer__direction,
.md-breadcrumbs,
.md-breadcrumbs__link{
  font-size: 0.8rem;
}

/* Dark mode: brighter breadcrumbs */
[data-md-color-scheme="slate"] .md-breadcrumbs,
[data-md-color-scheme="slate"] .md-breadcrumbs__link{
  color: var(--g2) !important;
  font-weight: 500;
}

/* Nav menu items */
.md-nav__link,
.md-tabs__link,
.md-footer__link{
  font-size: 0.85rem;
}

/* Headings */
h1,h2,h3,h4,h5,h6,
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6{
  color: var(--text) !important;
  letter-spacing: -0.01em;
}

/* Heading scale */
.md-typeset h1{ font-size: 1.8rem; }
.md-typeset h2{ font-size: 1.4rem; }
.md-typeset h3{ font-size: 1.2rem; }
.md-typeset h4{ font-size: 1.05rem; }
.md-typeset h5{ font-size: 0.95rem; }
.md-typeset h6{ font-size: 0.9rem; }

/* If the theme injects pure-white text, normalize it */
.md-typeset, .md-typeset p, .md-typeset li, .md-typeset td, .md-typeset th,
.md-content, .md-content *:where(p,li,td,th,small,strong,em){
  color: var(--text);
}

/* Muted text (captions, small labels) */
small, figcaption,
.md-typeset .md-caption,
.md-typeset .admonition-title,
.md-nav__title,
/* GitHub repo info — visible in header bar on desktop */
@media screen and (min-width: 76.25em){
  .md-header__source{
    display: block !important;
    max-width: 13rem;
    width: auto;
    margin-left: auto;
  }
}
.md-source{
  color: var(--g1) !important;
}
.md-source__repository{
  color: var(--g1) !important;
}
.md-source__facts{
  color: var(--g2) !important;
  font-size: 0.65rem;
}
/* Footer direction labels need light color against dark footer bg */
.md-footer .md-footer__direction{
  color: var(--g1) !important;
  opacity: 0.7;
}

/* =========================================================
   Kill “blue” at the source: MkDocs Material CSS variables
   ========================================================= */
:root{
  --md-default-fg-color: var(--text);
  --md-default-bg-color: var(--bg);

  --md-primary-fg-color: var(--link);
  --md-primary-bg-color: var(--bg);

  --md-accent-fg-color: var(--link);
  --md-accent-bg-color: var(--bg);

  --md-typeset-a-color: var(--link);
  --md-typeset-color: var(--text);

  /* Search highlight / selection */
  --md-selection-fg-color: var(--bg);
  --md-selection-bg-color: var(--link);
}

[data-md-color-scheme="slate"]{
  --md-default-fg-color: var(--text);
  --md-default-bg-color: var(--bg);
  --md-primary-fg-color: var(--link);
  --md-accent-fg-color: var(--link);
  --md-typeset-a-color: var(--link);
  --md-typeset-color: var(--text);
}

/* =========================================================
   Links (no blue ever)
   ========================================================= */
a, a:visited,
.md-typeset a, .md-typeset a:visited,
.prose a, .prose a:visited,
.bd-content a, .bd-content a:visited,
.toc a, .toc a:visited,
nav a, nav a:visited{
  color: var(--link) !important;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
  text-decoration-color: color-mix(in srgb, var(--link) 60%, transparent) !important;
}

a:hover,
.md-typeset a:hover,
.prose a:hover,
.bd-content a:hover,
.toc a:hover,
nav a:hover{
  color: var(--link-hover) !important;
  text-decoration-color: var(--link-hover) !important;
}

/* Header anchor links (“#”) and icon links */
.md-typeset .headerlink,
.md-typeset a.headerlink,
.md-typeset a.headerlink:hover{
  color: var(--muted) !important;
}

/* =========================================================
   Sidebars / nav / TOC (remove blue pills, blue borders)
   ========================================================= */
.md-nav__link,
.md-nav__title,
.md-nav__item .md-nav__link,
.md-nav__item a{
  color: var(--text) !important;
}

.md-nav__link:hover,
.md-nav__item a:hover{
  color: var(--link-hover) !important;
}

/* Active */
.md-nav__link--active,
.md-nav__item--active > .md-nav__link,
.md-nav__item--active > a{
  color: var(--text) !important;
  background: color-mix(in srgb, var(--surface) 40%, transparent) !important;
  border-left: 2px solid var(--link) !important;
}

/* Dark mode: stronger active state for sidebar + TOC */
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link,
[data-md-color-scheme="slate"] .md-nav__item--active > a{
  background: #1e1e1e !important;
  border-left: 2px solid var(--g3) !important;
  border-radius: 0 4px 4px 0;
}

/* TOC sidebar ("On this page") — always visible on desktop */
.md-sidebar,
.md-sidebar--secondary,
.md-sidebar--secondary .md-sidebar__inner,
.md-nav--secondary,
.md-nav__title{
  background: transparent !important;
}

@media screen and (min-width: 960px){
  .md-sidebar--secondary{
    display: block !important;
    height: auto !important;
  }
}

/* Disable blur overlay when nav drawer opens */
.md-overlay{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: rgba(0,0,0,0.3) !important;
}

/* Nav drawer (mobile/narrow) needs solid background */
@media screen and (max-width: 76.1875em){
  .md-sidebar--primary{
    background: var(--bg) !important;
  }
}

/* Nav drawer inner sections */
.md-nav--primary,
.md-nav--primary .md-nav{
  background: var(--bg) !important;
}


/* Remove focus/hover blue outlines that MkDocs Material adds via box-shadow */
.md-nav__link:focus,
.md-nav__link:focus-visible,
.md-header__button:focus,
.md-header__button:focus-visible,
.md-search__input:focus,
.md-search__input:focus-visible,
button:focus,
button:focus-visible,
a:focus,
a:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--link) 55%, transparent) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* =========================================================
   Cards / admonitions / blockquotes
   ========================================================= */
blockquote,
.md-typeset blockquote,
.admonition,
.md-typeset .admonition{
  background: color-mix(in srgb, var(--surface-2) 70%, transparent) !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--link) !important;
  border-radius: var(--radius) !important;
}

/* =========================================================
   Code (no per-line backgrounds, no violet)
   ========================================================= */
code, pre, kbd, samp{
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-feature-settings: "liga" 1, "calt" 1;
}

/* Inline code */
:not(pre) > code,
.md-typeset :not(pre) > code{
  background: color-mix(in srgb, var(--code-bg) 85%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--code-border) 75%, transparent) !important;
  border-radius: 6px;
  padding: 0.1rem 0.3rem;
  color: var(--text) !important; /* force: no purple */
  font-size: 0.85em;
}

/* Code blocks container */
pre, .highlight pre, .md-typeset pre{
  background: var(--code-bg) !important;
  border: 1px solid var(--code-border) !important;
  border-radius: var(--radius) !important;
  padding: 0.8rem 1rem !important;
  overflow-x: auto;
  box-shadow: var(--card-shadow, none) !important;
  color: var(--text) !important;
  font-size: 0.85rem;
}

/* MkDocs Material wraps code like: pre > code.md-code__content > span#__span-x-y */
pre code,
pre code span,
.md-typeset pre code,
.md-typeset pre code span{
  background: transparent !important;         /* kill per-line backgrounds */
  box-shadow: none !important;
}

/* Specific per-line highlight classes */
.highlight .hll,
.highlighttable td,
.highlighttable tr,
code .hll,
span.hll{
  background: transparent !important;
}

/* “Terminal-like” syntax (still ONLY greens): distinct but calm */
.highlight .c, .highlight .c1, .highlight .cm { color: color-mix(in srgb, var(--muted) 80%, var(--text)) !important; } /* comments */
.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt { color: var(--link) !important; font-weight: 600; } /* keywords */
.highlight .nn, .highlight .nc, .highlight .nf { color: var(--text) !important; font-weight: 600; } /* names/classes/functions */
.highlight .nb, .highlight .bp { color: var(--link-hover) !important; } /* builtins */
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sa, .highlight .sb, .highlight .sc { color: var(--muted) !important; } /* strings */
.highlight .m, .highlight .mi, .highlight .mf, .highlight .mh { color: var(--link) !important; } /* numbers */
.highlight .o, .highlight .p { color: var(--text) !important; } /* operators/punct */

/* =========================================================
   Buttons / icon clickables / copy-to-clipboard button
   ========================================================= */
/* MkDocs Material copy button */
.md-code__button,
button.md-clipboard,
.copybtn, .copy-button, .clipboard-copy, .download-button,
.md-typeset button,
.md-typeset .md-button{
  color: var(--ui-action) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

.md-code__button:hover,
button.md-clipboard:hover,
.copybtn:hover, .copy-button:hover, .clipboard-copy:hover, .download-button:hover,
.md-typeset button:hover,
.md-typeset .md-button:hover{
  color: var(--ui-action-hover) !important;
  border-color: var(--ui-action-hover) !important;
  box-shadow: none !important;
}

/* =========================================================
   SVG icon rendering
   - If icon SVG is “outline” (fill="none"), keep it outline
   - Otherwise (Material/FontAwesome), recolor via currentColor (filled)
   ========================================================= */
svg{ color: inherit !important; }

/* Outline icons */
svg[fill="none"],
svg[fill="none"] *{
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Filled icons (Material/FA/etc.) */
svg:not([fill="none"]),
svg:not([fill="none"]) *{
  fill: currentColor !important;
  stroke: none !important;
}

/* If an outline icon has explicit stroke attr, keep it */
svg[stroke],
svg[stroke] *{
  stroke: currentColor !important;
}

/* =========================================================
   Tailwind-ish “blue” utility overrides (MyST UI bits)
   ========================================================= */
.text-blue-800, .text-blue-700, .text-blue-600, .text-blue-500{
  color: var(--text) !important;
}
.dark .dark\:text-blue-200,
.dark .dark\:text-blue-300,
.dark .dark\:text-blue-400{
  color: var(--text) !important;
}

/* Hover utilities */
.hover\:text-blue-600:hover,
.hover\:text-blue-700:hover,
.hover\:text-blue-800:hover{
  color: var(--link-hover) !important;
}
.dark .dark\:hover\:text-blue-400:hover,
.dark .dark\:hover\:text-blue-300:hover{
  color: var(--link-hover) !important;
}

.hover\:border-blue-600:hover,
.hover\:border-blue-700:hover,
.hover\:border-blue-800:hover{
  border-color: var(--link-hover) !important;
}
.dark .dark\:hover\:border-blue-400:hover,
.dark .dark\:hover\:border-blue-300:hover{
  border-color: var(--link-hover) !important;
}

/* =========================================================
   Footer “prev/next” cards (MyST) – if present
   ========================================================= */
.myst-footer-links .myst-footer-link{
  color: var(--text) !important;
  border-color: var(--border) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.myst-footer-links .myst-footer-link:hover{
  color: var(--link-hover) !important;
  border-color: var(--link-hover) !important;
  box-shadow: none !important;
}
.myst-footer-links .myst-footer-link .myst-footer-link-group{
  color: var(--muted) !important;
}

/* =========================================================
   Minor quality-of-life tweaks
   ========================================================= */
/* Softer horizontal rules */
hr{ border-color: color-mix(in srgb, var(--border) 70%, transparent) !important; }

/* Tables */
table, .md-typeset table{
  background: transparent !important;
  border-color: var(--border) !important;
  box-shadow: var(--card-shadow, none);
  border-radius: var(--radius) !important;
  overflow: hidden;
}
.md-typeset table:not([class]) th{
  background: var(--surface) !important;
  border-bottom: 2px solid var(--border) !important;
  font-weight: 600;
}
.md-typeset table:not([class]) td{
  background: transparent !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
}

/* Dark table styling — visible header + row borders + subtle striping */
[data-md-color-scheme=”slate”] .md-typeset table:not([class]) th{
  background: #2a2a2a !important;
  border-bottom: 2px solid #555 !important;
}
[data-md-color-scheme=”slate”] .md-typeset table:not([class]) td{
  border-bottom: 1px solid #2a2a2a !important;
}
[data-md-color-scheme=”slate”] .md-typeset table:not([class]) tr:nth-child(odd) td{
  background: #222222 !important;
}

/* =========================================================
   Patch: keep only 3 fixes from the “fixed” variant
   1) Green scrollbars
   2) Consistent page background while scrolling
   3) Code blocks: remove off-color negative space around rounded corners
   ========================================================= */

/* 1) Scrollbars */
*{
  scrollbar-width: thin;
  scrollbar-color: var(--link) color-mix(in srgb, var(--bg) 85%, transparent);
}
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{
  background: color-mix(in srgb, var(--bg) 85%, transparent);
}
*::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--link) 75%, transparent);
  border: 2px solid color-mix(in srgb, var(--bg) 85%, transparent);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover{
  background: var(--link-hover);
}

/* 2) Background consistency (prevents “newly revealed” areas changing color) */
html, body{
  min-height: 100%;
  background: var(--bg) !important;
}
body{
  background-color: var(--bg) !important;
}

/* Make any nested containers inherit the global background instead of painting their own */
.myst-root,
.myst-main,
.myst-article,
.myst-page,
.myst-container,
.myst-content,
.myst-content article,
.myst-content__inner{
  background: transparent !important;
}

/* 3) Code blocks: remove “wrong color” negative space around rounded corners */
.myst-code{
  background: var(--code-bg) !important;
  border: 1px solid var(--code-border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden; /* ensures inner <pre> doesn't show square corners */
}

/* Many MyST code blocks set inner pre bg to "unset" – force it transparent */
.myst-code pre,
.myst-code .myst-code-body{
  background: transparent !important;
  margin: 0 !important;
  border: 0 !important;
}

/* =========================================================
   Landing page hero
   ========================================================= */
.hero{
  text-align: center;
  padding: 4rem 1rem 2rem;
  border-radius: 0 0 var(--radius) var(--radius);
  margin-bottom: 0.5rem;
}

/* Dark mode: tighter hero + subtle bottom separator */
[data-md-color-scheme="slate"] .hero{
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #2a2a2a;
}

.hero h1{
  font-size: 3.2rem !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.4rem;
  line-height: 1.1;
}

/* Tagline (second paragraph) */
.hero p:first-of-type{
  font-size: 1.05rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Sub-tagline (third paragraph) */
.hero p:first-of-type + p{
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 1.4rem;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.hero .md-button{
  display: inline-block;
  margin: 0.3rem;
  padding: 0.65rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none !important;
  border: 2px solid var(--link);
  color: var(--text) !important;
  transition: all 0.18s ease;
  letter-spacing: 0.01em;
}

.hero .md-button.md-button--primary,
.hero .md-button.md-button--primary:visited,
.md-typeset .hero .md-button.md-button--primary{
  background: var(--link);
  color: var(--bg) !important;
  text-decoration: none !important;
}

.hero .md-button.md-button--primary:hover,
.md-typeset .hero .md-button.md-button--primary:hover{
  background: var(--link-hover);
  border-color: var(--link-hover);
  color: var(--bg) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--link-hover) 25%, transparent);
}

.hero .md-button:not(.md-button--primary):hover{
  background: color-mix(in srgb, var(--link) 10%, transparent);
  border-color: var(--link-hover);
  color: var(--link-hover) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

/* Badges row */
.hero p:has(a > img){
  margin-bottom: 1.5rem;
}

/* =========================================================
   Card grid enhancements
   ========================================================= */

/* Card hover lift — Zensical "levitate" effect */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li{
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: var(--card-shadow, none);
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ol > li:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--link) 15%, transparent) !important;
}

/* Section dividers: generous breathing room */
.md-typeset hr{
  margin: 2.4rem 0 !important;
}

/* =========================================================
   Admonition color overrides — keep Nordic palette
   ========================================================= */
.md-typeset .admonition.tip,
.md-typeset details.tip{
  border-left-color: var(--g4) !important;
}
.md-typeset .admonition.info,
.md-typeset details.info{
  border-left-color: var(--g3) !important;
}
.md-typeset .admonition.success,
.md-typeset details.success{
  border-left-color: var(--g4) !important;
}
.md-typeset .admonition.warning,
.md-typeset details.warning{
  border-left-color: color-mix(in srgb, var(--g4) 70%, #c8a400) !important;
}
.md-typeset .admonition.abstract,
.md-typeset details.abstract{
  border-left-color: var(--g3) !important;
}

/* =========================================================
   Mermaid diagram styling
   ========================================================= */
.mermaid{
  margin: 1.5rem 0;
  text-align: center;
}

/* Theme the mermaid diagrams with our palette */
.mermaid .node rect,
.mermaid .node polygon,
.mermaid .node circle{
  fill: var(--surface) !important;
  stroke: var(--border) !important;
}

.mermaid .edgePath .path{
  stroke: var(--muted) !important;
}

.mermaid .edgeLabel{
  background: var(--bg) !important;
  color: var(--text) !important;
}

.mermaid text,
.mermaid .nodeLabel,
.mermaid .label{
  color: var(--text) !important;
  fill: var(--text) !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important;
}

/* Dark mermaid: neutral gray nodes instead of green */
[data-md-color-scheme="slate"] .mermaid .node rect,
[data-md-color-scheme="slate"] .mermaid .node polygon,
[data-md-color-scheme="slate"] .mermaid .node circle{
  fill: #2a2a2a !important;
  stroke: #555 !important;
}
[data-md-color-scheme="slate"] .mermaid .edgePath .path{
  stroke: #666 !important;
}
[data-md-color-scheme="slate"] .mermaid text,
[data-md-color-scheme="slate"] .mermaid .nodeLabel{
  fill: var(--g1) !important;
  color: var(--g1) !important;
}
[data-md-color-scheme="slate"] .mermaid .edgeLabel{
  background: #0d0d0d !important;
  color: var(--g1) !important;
}

/* Pre-rendered SVG diagrams (beautiful-mermaid): desaturate in dark mode */
[data-md-color-scheme="slate"] .mermaid-rendered svg{
  filter: saturate(0.3) brightness(1.3);
}