/* ── Everysight Brand Tokens ─────────────────────────────────── */
:root {
  --es-yellow: #EBEB70;
  --es-yellow-2: #D7D161;
  --es-dark-blue: #111723;
  --es-dark-blue-2: #1C2233;
  --es-light-grey: #E7E7E7;
  --es-dark-grey: #D7D7D7;
  --es-blue-grey: #8B9DAE;
  --es-light-blue: #A6BBCA;
}

/* ── Light Theme (scheme: default) ──────────────────────────── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--es-dark-blue);
  --md-primary-fg-color--light: var(--es-dark-blue-2);
  --md-primary-fg-color--dark: #0b0f17;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: var(--es-light-grey);
  --md-accent-fg-color: var(--es-yellow-2);
  --md-accent-fg-color--transparent: rgba(215, 209, 97, 0.12);
  --md-accent-bg-color: var(--es-dark-blue);
  --md-default-bg-color: #ffffff;
  --md-default-bg-color--light: var(--es-light-grey);
  --md-default-bg-color--lighter: #f5f5f5;
  --md-default-fg-color: var(--es-dark-blue);
  --md-default-fg-color--light: var(--es-blue-grey);
  --md-default-fg-color--lighter: var(--es-light-blue);
  --md-typeset-color: var(--es-dark-blue);
  --md-code-bg-color: var(--es-light-grey);
  --md-footer-bg-color: var(--es-dark-blue);
  --md-footer-bg-color--dark: #0b0f17;
  --md-footer-fg-color: var(--es-light-grey);
  --md-footer-fg-color--light: var(--es-blue-grey);
  --md-footer-fg-color--lighter: var(--es-blue-grey);
}

/* ── Dark Theme (scheme: slate) ─────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--es-dark-blue-2);
  --md-primary-fg-color--light: var(--es-dark-blue);
  --md-primary-fg-color--dark: #0b0f17;
  --md-primary-bg-color: var(--es-light-grey);
  --md-primary-bg-color--light: #ffffff;
  --md-accent-fg-color: var(--es-yellow);
  --md-accent-fg-color--transparent: rgba(235, 235, 112, 0.12);
  --md-accent-bg-color: var(--es-dark-blue);
  --md-default-bg-color: var(--es-dark-blue);
  --md-default-bg-color--light: var(--es-dark-blue-2);
  --md-default-bg-color--lighter: #242c3d;
  --md-default-fg-color: var(--es-light-grey);
  --md-default-fg-color--light: var(--es-blue-grey);
  --md-default-fg-color--lighter: var(--es-light-blue);
  --md-typeset-color: var(--es-light-grey);
  --md-code-bg-color: var(--es-dark-blue-2);
  --md-footer-bg-color: #0b0f17;
  --md-footer-bg-color--dark: #060911;
  --md-footer-fg-color: var(--es-light-grey);
  --md-footer-fg-color--light: var(--es-blue-grey);
  --md-footer-fg-color--lighter: var(--es-blue-grey);
}

/* ── Header ─────────────────────────────────────────────────── */
.md-header {
  background-color: var(--es-dark-blue);
}

[data-md-color-scheme="slate"] .md-header {
  background-color: #0b0f17;
}

.md-header__title {
  font-weight: 500;
}

/* ── Navigation sidebar ─────────────────────────────────────── */

/* Dark theme: yellow accent for active nav */
[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__link:is(:focus, :hover) {
  color: var(--es-yellow) !important;
  font-weight: 500;
}
[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link--index {
  color: var(--es-yellow) !important;
  font-weight: 500;
}

/* Light theme: darker gold + medium for active nav */
[data-md-color-scheme="default"] .md-nav__link--active,
[data-md-color-scheme="default"] .md-nav__item--active > .md-nav__link {
  color: #8a7d1a !important;
  font-weight: 500;
}
[data-md-color-scheme="default"] .md-nav__link:is(:focus, :hover) {
  color: #8a7d1a !important;
}
[data-md-color-scheme="default"] .md-nav__item--active > .md-nav__link--index {
  color: #8a7d1a !important;
  font-weight: 500;
}

/* ── Navigation indicator line (dark mode visibility) ────────── */
[data-md-color-scheme="slate"] .md-nav__item--nested > .md-nav {
  border-left-color: var(--es-blue-grey) !important;
}
[data-md-color-scheme="slate"] .md-nav__link--passed,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--active > .md-nav {
  border-left-color: var(--es-yellow) !important;
}

/* ── Accent / links ─────────────────────────────────────────── */
.md-typeset a {
  color: var(--md-accent-fg-color);
}
.md-typeset a:is(:focus, :hover) {
  color: var(--es-yellow-2);
}

[data-md-color-scheme="default"] .md-typeset a {
  color: #b5a826;
}
[data-md-color-scheme="default"] .md-typeset a:is(:focus, :hover) {
  color: #9e9320;
}

/* Inline code inside a link.
   Material defaults to --md-accent-fg-color--transparent (a barely-tinted
   yellow) as the background while the text inherits the link's accent color,
   which renders as yellow-on-yellow and is effectively invisible in dark mode
   until hover (Issue: kmp-compose-sample link in libraries-api/kmp.md).
   Force a contrasting code background + accent text in both schemes. */
[data-md-color-scheme="slate"] .md-typeset a code {
  background-color: var(--md-code-bg-color);
  color: var(--es-yellow);
}
[data-md-color-scheme="slate"] .md-typeset a:is(:focus, :hover) code {
  color: var(--es-yellow-2);
}
[data-md-color-scheme="default"] .md-typeset a code {
  background-color: var(--md-code-bg-color);
  color: #b5a826;
}
[data-md-color-scheme="default"] .md-typeset a:is(:focus, :hover) code {
  color: #9e9320;
}

/* ── Tables ─────────────────────────────────────────────────── */
.md-typeset table:not([class]) td code,
.md-typeset table:not([class]) th code {
  white-space: nowrap;
}

/* ── Admonitions ────────────────────────────────────────────── */
.md-typeset .admonition,
.md-typeset details {
  border-color: var(--md-accent-fg-color);
}

/* ── Tabs ────────────────────────────────────────────────────── */
.md-typeset .tabbed-labels > label:hover {
  color: var(--md-accent-fg-color);
}
.md-typeset .tabbed-labels > .tabbed-label--active {
  color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

/* ── Footer ─────────────────────────────────────────────────── */
.md-footer {
  background-color: var(--md-footer-bg-color);
  color: var(--md-footer-fg-color);
}

.md-footer-logo {
  margin-bottom: 0.5rem;
  text-align: center;
}
.md-footer .md-footer-logo img,
.md-footer .footer-logo-img,
.md-footer-meta .footer-logo-img,
footer .footer-logo-img,
img.footer-logo-img {
  height: 28px !important;
  width: auto !important;
  max-width: 180px !important;
  min-width: 0 !important;
  opacity: 0.7;
  display: inline-block !important;
  object-fit: contain !important;
}

/* ── Theme toggle icons ─────────────────────────────────────── */
[data-md-color-scheme="default"] .md-header .md-header__topic {
  color: #ffffff;
}

/* ── Scrollbar (subtle brand touch) ─────────────────────────── */
::-webkit-scrollbar-thumb {
  background: var(--es-blue-grey);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--es-yellow-2);
}