/*
 * Syncbits brand alignment (dark theme ~ syncbits.app)
 * Logo blue: #4a8eea | Accent yellow: #f5d410 | Deep navy surfaces
 */

/* Base canvas (syncbits.app dark): #0B1220 | Top bar: rgba(15, 23, 42, 0.95) */

/* ----- Dark (slate scheme) ----- */
[data-md-color-scheme="slate"] {
  /* Page & chrome — main background */
  --md-default-bg-color: #0b1220;
  --md-default-fg-color: #f1f5f9;
  --md-typeset-color: #94a3b8;
  --md-typeset-a-color: #4a8eea;

  /* Top bar: slightly lighter than base so logo (blue SVG) reads clearly */
  --md-header-bg-color: rgba(15, 23, 42, 0.95);
  --md-header-fg-color: #ffffff;
  --md-footer-bg-color: #0b1220;
  --md-footer-fg-color: #94a3b8;

  /* Primary = brand blue (buttons, selected nav, focus) */
  --md-primary-fg-color: #4a8eea;
  --md-primary-fg-color--light: #6ba3ef;
  --md-primary-fg-color--dark: #3a7dd8;

  /* Accent = CTA yellow */
  --md-accent-fg-color: #f5d410;
  --md-accent-fg-color--transparent: hsla(51, 92%, 51%, 0.15);

  /* Slightly lifted surfaces (cards, code, search) */
  --md-code-bg-color: #131c2e;
  --md-code-fg-color: #e2e8f0;
  --md-code-border-color: #1e293b;

  /* Navigation / TOC */
  --md-typeset-kbd-color: #e2e8f0;
  --md-typeset-kbd-border-color: #334155;
  --md-typeset-kbd-accent-color: #0b1220;
}

/* Ensure header / tabs use the bar color (variable alone can miss nested layers) */
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  background-color: rgba(15, 23, 42, 0.95);
}

/* Sidebar & mobile nav: same as page base */
[data-md-color-scheme="slate"] .md-nav--primary,
[data-md-color-scheme="slate"] .md-nav--secondary,
[data-md-color-scheme="slate"] .md-sidebar {
  background-color: #0b1220;
}

[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: #4a8eea;
}

/* Tables, subtle borders */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  background-color: #121a2b;
  border-color: #1e293b;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover {
  background-color: rgba(74, 142, 234, 0.06);
}

/* ----- Light: brand-aligned links (body stays Material default) ----- */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #2563eb;
  --md-accent-fg-color: #ca8a04;
}

/* Left sidebar: hide duplicate site title (header already has logo + name) */
.md-nav--primary > .md-nav__title {
  display: none;
}