/* ==========================================================================
   Arandu Design System — "The Digital Biome"
   Based on the landing page design: deep jungle dark, amber accents,
   organic roundedness, no harsh borders.
   ========================================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- CSS Variables (Dark Slate) ---------- */
[data-md-color-scheme="slate"] {
  /* Surface hierarchy */
  --md-default-bg-color: #03170d;
  --md-default-fg-color: #d0e9d6;
  --md-default-fg-color--light: #c0c9bf;
  --md-default-fg-color--lighter: #8a9b8e;
  --md-default-fg-color--lightest: #404942;

  /* Primary green */
  --md-primary-fg-color: #0f2418;
  --md-primary-fg-color--light: #192e22;
  --md-primary-fg-color--dark: #0b1f14;
  --md-primary-bg-color: #d0e9d6;

  /* Accent amber */
  --md-accent-fg-color: #ebc246;
  --md-accent-fg-color--transparent: rgba(235, 194, 70, 0.12);
  --md-accent-bg-color: #03170d;

  /* Typography */
  --md-typeset-color: #d0e9d6;
  --md-typeset-a-color: #7ed9a5;

  /* Code */
  --md-code-bg-color: #0b1f14;
  --md-code-fg-color: #d0e9d6;
  --md-code-hl-color: rgba(126, 217, 165, 0.1);

  /* Footer */
  --md-footer-bg-color: #03170d;
  --md-footer-bg-color--dark: #001208;
  --md-footer-fg-color: #c0c9bf;
  --md-footer-fg-color--light: #8a9b8e;
  --md-footer-fg-color--lighter: #404942;

  /* Sidebar */
  --md-sidebar-bg-color: #03170d;

  /* Admonitions */
  --md-admonition-bg-color: #0f2418;
}

/* ---------- CSS Variables (Light) — "Dawn in the forest" ---------- */
[data-md-color-scheme="default"] {
  /* Background: warm off-white with green undertone */
  --md-default-bg-color: #f4f8f5;
  --md-default-fg-color: #0f2418;
  --md-default-fg-color--light: #2d4a38;
  --md-default-fg-color--lighter: #5a7565;
  --md-default-fg-color--lightest: #b0c4b5;

  /* Primary — deep forest green */
  --md-primary-fg-color: #0f2418;
  --md-primary-fg-color--light: #1a4a2e;
  --md-primary-fg-color--dark: #091a10;
  --md-primary-bg-color: #f4f8f5;

  /* Accent — rich amber */
  --md-accent-fg-color: #9a7800;
  --md-accent-fg-color--transparent: rgba(154, 120, 0, 0.1);

  /* Typography */
  --md-typeset-color: #0f2418;
  --md-typeset-a-color: #006d44;

  /* Code */
  --md-code-bg-color: #e8f0ea;
  --md-code-fg-color: #005d3a;
  --md-code-hl-color: rgba(0, 109, 68, 0.08);

  /* Footer */
  --md-footer-bg-color: #0f2418;
  --md-footer-bg-color--dark: #091a10;
  --md-footer-fg-color: #d0e9d6;
  --md-footer-fg-color--light: #c0c9bf;
  --md-footer-fg-color--lighter: #8a9b8e;

  /* Sidebar */
  --md-sidebar-bg-color: #f4f8f5;

  /* Admonitions */
  --md-admonition-bg-color: #eaf2ec;
}

/* Light mode — header */
[data-md-color-scheme="default"] .md-header {
  background-color: rgba(15, 36, 24, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 20px rgba(0, 18, 8, 0.1);
}

/* Light mode — header text stays white */
[data-md-color-scheme="default"] .md-header .md-header__title,
[data-md-color-scheme="default"] .md-header .md-header__topic,
[data-md-color-scheme="default"] .md-header .md-header-nav__button {
  color: #d0e9d6;
}

/* Light mode — links */
[data-md-color-scheme="default"] .md-typeset a {
  color: #006d44;
  text-decoration: none;
  transition: color 0.2s ease;
}

[data-md-color-scheme="default"] .md-typeset a:hover {
  color: #9a7800;
}

/* Light mode — active nav */
[data-md-color-scheme="default"] .md-nav__link--active {
  color: #006d44;
  font-weight: 600;
}

[data-md-color-scheme="default"] .md-nav__link:hover {
  color: #006d44;
}

/* Light mode — code blocks */
[data-md-color-scheme="default"] .md-typeset code {
  background-color: #e8f0ea;
  color: #005d3a;
  border-radius: 0.375rem;
  padding: 0.15em 0.4em;
  font-size: 0.85em;
  border: 1px solid rgba(15, 36, 24, 0.08);
}

[data-md-color-scheme="default"] .md-typeset pre {
  background-color: #e8f0ea;
  border-radius: 0.75rem;
  border: 1px solid rgba(15, 36, 24, 0.08);
  border-top: 2px solid rgba(0, 109, 68, 0.2);
}

[data-md-color-scheme="default"] .md-typeset pre > code {
  background-color: transparent;
  border: none;
  color: #0f2418;
}

/* Light mode — tables */
[data-md-color-scheme="default"] .md-typeset table:not([class]) {
  border: none;
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: #eaf2ec;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) th {
  background-color: #dce8df;
  color: #006d44;
  font-family: "Plus Jakarta Sans", var(--md-text-font);
  font-weight: 600;
  border: none;
  border-bottom: 1px solid rgba(15, 36, 24, 0.1);
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) td {
  border: none;
  border-bottom: 1px solid rgba(15, 36, 24, 0.06);
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) tr:last-child td {
  border-bottom: none;
}

/* Light mode — admonitions */
[data-md-color-scheme="default"] .md-typeset .admonition,
[data-md-color-scheme="default"] .md-typeset details {
  background-color: #eaf2ec;
  border: 1px solid rgba(15, 36, 24, 0.06);
  border-left: 3px solid var(--md-admonition-fg-color);
  border-radius: 0.75rem;
  box-shadow: 0 2px 12px rgba(0, 18, 8, 0.04);
}

[data-md-color-scheme="default"] .md-typeset .admonition-title,
[data-md-color-scheme="default"] .md-typeset summary {
  background-color: #dce8df;
  border-radius: 0.75rem 0.75rem 0 0;
}

/* Light mode — tip amber */
[data-md-color-scheme="default"] .md-typeset .admonition.tip,
[data-md-color-scheme="default"] .md-typeset details.tip {
  border-left-color: #9a7800;
}

/* Light mode — blockquotes */
[data-md-color-scheme="default"] .md-typeset blockquote {
  border-left: 3px solid #006d44;
  background-color: rgba(234, 242, 236, 0.6);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.8rem 1.2rem;
  color: #2d4a38;
}

/* Light mode — footer dark (like dark mode) */
[data-md-color-scheme="default"] .md-footer {
  background-color: #0f2418;
  border-top: none;
}

/* Light mode — HR */
[data-md-color-scheme="default"] .md-typeset hr {
  border-color: rgba(15, 36, 24, 0.08);
}

/* Light mode — selection */
[data-md-color-scheme="default"] ::selection {
  background-color: rgba(0, 109, 68, 0.15);
  color: #0f2418;
}

/* Light mode — mermaid */
[data-md-color-scheme="default"] .mermaid {
  background-color: #e8f0ea;
  border-radius: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(15, 36, 24, 0.08);
}

/* Light mode — search */
[data-md-color-scheme="default"] .md-search__input {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 0.75rem;
}

/* Light mode — back to top */
[data-md-color-scheme="default"] .md-top {
  background-color: #0f2418;
  color: #d0e9d6;
  border-radius: 0.75rem;
}

/* Light mode — permalink hover */
[data-md-color-scheme="default"] .md-typeset .headerlink:hover {
  color: #9a7800;
}

/* ---------- Font families ---------- */
:root {
  --md-text-font: "Inter", "Helvetica Neue", sans-serif;
  --md-code-font: "JetBrains Mono", "Fira Code", monospace;
}

/* Headings use Plus Jakarta Sans */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: "Plus Jakarta Sans", var(--md-text-font);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.md-typeset h1 {
  font-weight: 800;
  font-size: 2.2em;
}

/* ---------- Header / Nav bar ---------- */
.md-header {
  background-color: rgba(3, 23, 13, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(64, 73, 66, 0.15);
  box-shadow: none;
}

/* ---------- Navigation sidebar ---------- */
[data-md-color-scheme="slate"] .md-sidebar {
  background-color: #03170d;
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: #7ed9a5;
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #7ed9a5;
  font-weight: 600;
}

/* ---------- Content area ---------- */
[data-md-color-scheme="slate"] .md-content {
  background-color: #03170d;
}

/* ---------- Links ---------- */
[data-md-color-scheme="slate"] .md-typeset a {
  color: #7ed9a5;
  text-decoration: none;
  transition: color 0.2s ease;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #ebc246;
}

/* ---------- Code blocks — "specimen under microscope" ---------- */
[data-md-color-scheme="slate"] .md-typeset code {
  background-color: #0b1f14;
  color: #7ed9a5;
  border-radius: 0.375rem;
  padding: 0.15em 0.4em;
  font-size: 0.85em;
  border: 1px solid rgba(64, 73, 66, 0.15);
}

[data-md-color-scheme="slate"] .md-typeset pre {
  background-color: #0b1f14;
  border-radius: 0.75rem;
  border: 1px solid rgba(126, 217, 165, 0.08);
  border-top: 2px solid rgba(126, 217, 165, 0.15);
  overflow: hidden;
}

[data-md-color-scheme="slate"] .md-typeset pre > code {
  background-color: transparent;
  border: none;
  padding: 1em 1.2em;
  font-size: 0.85em;
  color: #d0e9d6;
}

/* ---------- Tables — no harsh borders ---------- */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  border: none;
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: #0f2418;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: #192e22;
  color: #7ed9a5;
  font-family: "Plus Jakarta Sans", var(--md-text-font);
  font-weight: 600;
  border: none;
  border-bottom: 1px solid rgba(64, 73, 66, 0.2);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  border: none;
  border-bottom: 1px solid rgba(64, 73, 66, 0.1);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:last-child td {
  border-bottom: none;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover td {
  background-color: rgba(126, 217, 165, 0.04);
}

/* ---------- Admonitions — glassmorphic ---------- */
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background-color: rgba(15, 36, 24, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(64, 73, 66, 0.15);
  border-left: 3px solid var(--md-admonition-fg-color);
  border-radius: 0.75rem;
  box-shadow: 0 4px 40px rgba(0, 18, 8, 0.3);
}

[data-md-color-scheme="slate"] .md-typeset .admonition-title,
[data-md-color-scheme="slate"] .md-typeset summary {
  background-color: rgba(25, 46, 34, 0.5);
  border-radius: 0.75rem 0.75rem 0 0;
  border-bottom: 1px solid rgba(64, 73, 66, 0.1);
}

/* Tip admonitions — amber accent */
[data-md-color-scheme="slate"] .md-typeset .admonition.tip,
[data-md-color-scheme="slate"] .md-typeset details.tip {
  border-left-color: #ebc246;
}

/* ---------- Tabs ---------- */
[data-md-color-scheme="slate"] .md-typeset .tabbed-labels > label {
  color: #8a9b8e;
  border-bottom-color: transparent;
}

[data-md-color-scheme="slate"] .md-typeset .tabbed-labels > label--active,
[data-md-color-scheme="slate"] .md-typeset .tabbed-labels > label:hover {
  color: #7ed9a5;
}

[data-md-color-scheme="slate"] .md-typeset .tabbed-set {
  border-radius: 0.75rem;
}

/* ---------- Search ---------- */
[data-md-color-scheme="slate"] .md-search__input {
  background-color: #0f2418;
  border-radius: 0.75rem;
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: #8a9b8e;
}

/* ---------- Footer ---------- */
[data-md-color-scheme="slate"] .md-footer {
  background-color: #001208;
  border-top: 1px solid rgba(64, 73, 66, 0.15);
}

/* ---------- Back to top button ---------- */
.md-top {
  background-color: #192e22;
  color: #7ed9a5;
  border-radius: 0.75rem;
  border: 1px solid rgba(64, 73, 66, 0.15);
  box-shadow: 0 4px 40px rgba(0, 18, 8, 0.4);
}

.md-top:hover {
  background-color: #1f3a2b;
}

/* ---------- Scrollbar ---------- */
[data-md-color-scheme="slate"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-track {
  background: #03170d;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: #192e22;
  border-radius: 3px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
  background: #7ed9a5;
}

/* ---------- Mermaid diagrams ---------- */
[data-md-color-scheme="slate"] .mermaid {
  background-color: #0b1f14;
  border-radius: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(64, 73, 66, 0.15);
}

/* ---------- Copy button in code blocks ---------- */
[data-md-color-scheme="slate"] .md-clipboard {
  color: #8a9b8e;
}

[data-md-color-scheme="slate"] .md-clipboard:hover {
  color: #ebc246;
}

/* ---------- Selection highlight ---------- */
[data-md-color-scheme="slate"] ::selection {
  background-color: rgba(126, 217, 165, 0.2);
  color: #d0e9d6;
}

/* ---------- HR — subtle tonal transition ---------- */
[data-md-color-scheme="slate"] .md-typeset hr {
  border-color: rgba(64, 73, 66, 0.15);
}

/* ---------- Blockquotes ---------- */
[data-md-color-scheme="slate"] .md-typeset blockquote {
  border-left: 3px solid #7ed9a5;
  background-color: rgba(15, 36, 24, 0.4);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.8rem 1.2rem;
  color: #c0c9bf;
}

/* ---------- Task lists ---------- */
[data-md-color-scheme="slate"] .md-typeset .task-list-indicator::before {
  border-color: #7ed9a5;
}

/* ---------- Permalink anchors ---------- */
[data-md-color-scheme="slate"] .md-typeset .headerlink {
  color: #404942;
}

[data-md-color-scheme="slate"] .md-typeset .headerlink:hover {
  color: #ebc246;
}