/* ══════════════════════════════════════════════
   Anthropic Official Brand Palette
   ══════════════════════════════════════════════ */

[data-md-color-scheme="default"] {
  --md-default-bg-color: #faf9f5;
  --md-default-fg-color: #141413;
  --md-default-fg-color--light: #b0aea5;
  --md-default-fg-color--lighter: #c8c6be;
  --md-code-bg-color: #e8e6dc;
  --md-typeset-a-color: #d97757;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #141413;
  --md-default-fg-color: #faf9f5;
  --md-default-fg-color--light: #b0aea5;
  --md-default-fg-color--lighter: #828179;
  --md-code-bg-color: #1e1e1c;
  --md-typeset-a-color: #d97757;
}

/* ══════════════════════════════════════════════
   Admonition overrides — ALL color properties
   border-color + title color + title bg + icon color
   ══════════════════════════════════════════════ */

/* All admonition titles → black text #141413 */
html .md-typeset .admonition > .admonition-title,
html .md-typeset details > summary {
  color: #141413 !important;
}

/* --- note / info / question → Mid Gray #b0aea5 (neutral warm) --- */
html .md-typeset .admonition.note,
html .md-typeset details.note,
html .md-typeset .admonition.info,
html .md-typeset details.info,
html .md-typeset .admonition.question,
html .md-typeset details.question {
  border-color: #b0aea5 !important;
}
html .md-typeset .note > .admonition-title,
html .md-typeset .note > summary,
html .md-typeset .info > .admonition-title,
html .md-typeset .info > summary,
html .md-typeset .question > .admonition-title,
html .md-typeset .question > summary {
  background-color: rgba(176, 174, 165, 0.08) !important;
  border-color: #b0aea5 !important;
}
html .md-typeset .note > .admonition-title::before,
html .md-typeset .note > summary::before,
html .md-typeset .info > .admonition-title::before,
html .md-typeset .info > summary::before,
html .md-typeset .question > .admonition-title::before,
html .md-typeset .question > summary::before {
  background-color: #b0aea5 !important;
}

/* --- abstract / tip → Anthropic Orange #d97757 --- */
html .md-typeset .admonition.abstract,
html .md-typeset details.abstract,
html .md-typeset .admonition.tip,
html .md-typeset details.tip {
  border-color: #d97757 !important;
}
html .md-typeset .abstract > .admonition-title,
html .md-typeset .abstract > summary,
html .md-typeset .tip > .admonition-title,
html .md-typeset .tip > summary {
  background-color: rgba(217, 119, 87, 0.08) !important;
  border-color: #d97757 !important;
}
html .md-typeset .abstract > .admonition-title::before,
html .md-typeset .abstract > summary::before,
html .md-typeset .tip > .admonition-title::before,
html .md-typeset .tip > summary::before {
  background-color: #d97757 !important;
}

/* --- success / example → Anthropic Green #788c5d --- */
html .md-typeset .admonition.success,
html .md-typeset details.success,
html .md-typeset .admonition.example,
html .md-typeset details.example {
  border-color: #788c5d !important;
}
html .md-typeset .success > .admonition-title,
html .md-typeset .success > summary,
html .md-typeset .example > .admonition-title,
html .md-typeset .example > summary {
  background-color: rgba(120, 140, 93, 0.08) !important;
  border-color: #788c5d !important;
}
html .md-typeset .success > .admonition-title::before,
html .md-typeset .success > summary::before,
html .md-typeset .example > .admonition-title::before,
html .md-typeset .example > summary::before {
  background-color: #788c5d !important;
}

/* --- warning → Brand Tan #D4A574 --- */
html .md-typeset .admonition.warning,
html .md-typeset details.warning {
  border-color: #D4A574 !important;
}
html .md-typeset .warning > .admonition-title,
html .md-typeset .warning > summary {
  background-color: rgba(212, 165, 116, 0.08) !important;
  border-color: #D4A574 !important;
}
html .md-typeset .warning > .admonition-title::before,
html .md-typeset .warning > summary::before {
  background-color: #D4A574 !important;
}

/* --- danger / failure → Derived Red #c4523f --- */
html .md-typeset .admonition.danger,
html .md-typeset details.danger,
html .md-typeset .admonition.failure,
html .md-typeset details.failure {
  border-color: #c4523f !important;
}
html .md-typeset .danger > .admonition-title,
html .md-typeset .danger > summary,
html .md-typeset .failure > .admonition-title,
html .md-typeset .failure > summary {
  background-color: rgba(196, 82, 63, 0.08) !important;
  border-color: #c4523f !important;
}
html .md-typeset .danger > .admonition-title::before,
html .md-typeset .danger > summary::before,
html .md-typeset .failure > .admonition-title::before,
html .md-typeset .failure > summary::before {
  background-color: #c4523f !important;
}

/* --- quote → Mid Gray #b0aea5 --- */
html .md-typeset .admonition.quote,
html .md-typeset details.quote {
  border-color: #b0aea5 !important;
}
html .md-typeset .quote > .admonition-title,
html .md-typeset .quote > summary {
  background-color: rgba(176, 174, 165, 0.08) !important;
  border-color: #b0aea5 !important;
}
html .md-typeset .quote > .admonition-title::before,
html .md-typeset .quote > summary::before {
  background-color: #b0aea5 !important;
}

/* ══════════════════════════════════════════════
   Tables
   ══════════════════════════════════════════════ */

.md-typeset table {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e8e6dc;
}

[data-md-color-scheme="default"] .md-typeset table th {
  background: #141413;
  color: #faf9f5;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset table th {
  background: #1e1e1c;
  color: #faf9f5;
  font-weight: 600;
}

.md-typeset table tr:nth-child(2n) {
  background: var(--md-code-bg-color);
}

/* ══════════════════════════════════════════════
   General
   ══════════════════════════════════════════════ */

.md-typeset .admonition,
.md-typeset details {
  border-left-width: 4px;
  border-radius: 6px;
}

.md-typeset blockquote {
  border-left: 4px solid #D4A574;
  padding-left: 1rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset pre { border-radius: 6px; }
.md-typeset code { border-radius: 4px; padding: 0.15em 0.35em; }
.md-typeset a { transition: color 0.15s ease; }

.md-typeset .grid.cards > ul > li:hover {
  border-color: #d97757;
}

.md-typeset .mermaid-custom {
  margin: 1.5rem auto;
  text-align: center;
  overflow-x: auto;
}
.md-typeset .mermaid-custom svg {
  max-width: 100%;
  height: auto;
  min-width: 600px;
}

@media screen and (max-width: 768px) {
  .md-typeset .mermaid-custom svg { min-width: 400px; }
}
