/* ============================================================================
   RECON brand skin for Material (slate). Tokens mirror the shell:
   bg #0a0e12 · surface #121820 · teal #1f9c84 / text #5fd3a0 · danger #d85c52
   ============================================================================ */

:root {
  --recon-bg:       #0a0e12;
  --recon-surface:  #121820;
  --recon-header:   #0d141b;
  --recon-teal:     #1f9c84;
  --recon-teal-lt:  #5fd3a0;
  --recon-danger:   #d85c52;
  --recon-hairline: rgba(95, 211, 160, .14);
}

/* Brand accent across both schemes. */
:root > * {
  --md-primary-fg-color:  var(--recon-header);
  --md-accent-fg-color:   var(--recon-teal-lt);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color:  var(--recon-bg);
  --md-primary-fg-color:  var(--recon-header);
  --md-accent-fg-color:   var(--recon-teal-lt);
  --md-typeset-a-color:   var(--recon-teal-lt);
  --md-code-bg-color:     #0e141b;
  --md-footer-bg-color:   #0d141b;
}

/* ---------- header: tinted, with a teal hairline and a bit of glow ---------- */
.md-header {
  background: linear-gradient(180deg, #10171f 0%, var(--recon-header) 100%);
  border-bottom: 1px solid var(--recon-hairline);
  box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 8px 24px -16px rgba(31,156,132,.5);
}
.md-header__title { font-weight: 600; letter-spacing: .18em; }
.md-logo img, .md-header__button.md-logo img { height: 1.7rem; width: auto; }
.md-tabs { background: transparent; }

/* ---------- search pill picks up the brand ---------- */
.md-search__form { border-radius: 10px; }
[data-md-toggle="search"]:checked ~ .md-header .md-search__input { background: rgba(95,211,160,.06); }

/* ---------- nav ---------- */
.md-nav__title { letter-spacing: .04em; text-transform: uppercase; font-size: .66rem; color: var(--recon-teal-lt); opacity: .85; }
.md-nav__link--active, .md-nav__item--active > .md-nav__link { color: var(--recon-teal-lt); font-weight: 600; }

/* ---------- links & inline accents ---------- */
.md-typeset a:hover { color: #8ee9c0; }
.md-typeset :target { scroll-margin-top: 4rem; }
::selection { background: rgba(31,156,132,.35); }

/* ---------- home page: brand the lead-in ---------- */
.md-typeset h1 {
  letter-spacing: .14em;
  font-weight: 700;
  color: #eef4f2;
}
.md-typeset h1::after {
  content: ""; display: block; width: 3.2rem; height: 3px; margin-top: .5rem;
  border-radius: 3px; background: linear-gradient(90deg, var(--recon-teal), transparent);
}
.md-typeset h2 { border-bottom: 1px solid var(--recon-hairline); padding-bottom: .25rem; }

/* ---------- tables: surface + teal header ---------- */
.md-typeset table:not([class]) { border: 1px solid var(--recon-hairline); border-radius: 10px; overflow: hidden; }
.md-typeset table:not([class]) th {
  background: #10171f; color: #dfe8e4; font-weight: 600;
  border-bottom: 1px solid var(--recon-hairline);
}
.md-typeset table:not([class]) tr:hover { background: rgba(95,211,160,.04); }

/* ---------- code ---------- */
.md-typeset pre > code { border: 1px solid rgba(255,255,255,.05); border-radius: 10px; }
.md-typeset code { color: #bfe9d6; }

/* ---------- admonitions: brand note/tip, keep warning amber, danger teal-red ---------- */
.md-typeset .admonition { border-radius: 10px; }
.md-typeset .admonition.note, .md-typeset details.note { border-left-color: var(--recon-teal); }
.md-typeset .note > .admonition-title, .md-typeset .note > summary {
  background: rgba(31,156,132,.12);
}
.md-typeset .note > .admonition-title::before, .md-typeset .note > summary::before { background-color: var(--recon-teal-lt); }
.md-typeset .admonition.danger, .md-typeset details.danger { border-left-color: var(--recon-danger); }

/* ---------- footer ---------- */
.md-footer-meta { border-top: 1px solid var(--recon-hairline); }
.md-copyright { letter-spacing: .02em; }

/* ---------- buttons (md-button class) in teal ---------- */
.md-typeset .md-button {
  border-color: var(--recon-teal); color: var(--recon-teal-lt); border-radius: 8px;
}
.md-typeset .md-button:hover {
  background: var(--recon-teal); border-color: var(--recon-teal); color: #07130f;
}
.md-typeset .md-button--primary {
  background: var(--recon-teal); border-color: var(--recon-teal); color: #07130f;
}
.md-typeset .md-button--primary:hover { background: var(--recon-teal-lt); border-color: var(--recon-teal-lt); }