/* AppGantry docs brand overrides.
 *
 * Goal: make the docs site look like the marketing site \u2014 subtle
 * white/dark header with a bottom border (Bootstrap bg-body-tertiary
 * vibe), purple #9000FF reserved for accents (links, active states,
 * search highlights) rather than splashed across the whole header bar.
 *
 * Material's primary slot drives the header bar; accent drives links
 * and highlights. We point primary at the body background and accent
 * at the brand colour, then add a hairline bottom border so the bar
 * still reads as a distinct surface.
 *
 * Kept small on purpose. Anything that needs more than a CSS variable
 * tweak probably wants the docs site to diverge from marketing, and
 * we should think twice before making that choice. */

:root {
  /* Header bar: near-white with a hint of grey, matching marketing's
   * bg-body-tertiary navbar. Foreground text/icons stay dark. */
  --md-primary-fg-color:        #f8f9fa;
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark:  #e9ecef;
  --md-primary-bg-color:        #212529;
  --md-primary-bg-color--light: #495057;

  /* Brand accent. Used by Material for links, active nav, the search
   * cursor, and selection highlights. */
  --md-accent-fg-color:         #9000ff;
  --md-accent-fg-color--transparent: rgba(144, 0, 255, 0.10);
  --md-accent-bg-color:         #ffffff;
  --md-accent-bg-color--light:  rgba(255, 255, 255, 0.7);

  --md-text-font:               -apple-system, BlinkMacSystemFont, "Segoe UI",
                                "Helvetica Neue", Helvetica, Arial, "Inter",
                                "Roboto", sans-serif;
  --md-code-font:               ui-monospace, SFMono-Regular, "SF Mono", Consolas,
                                "Liberation Mono", Menlo, monospace;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #1a1d20;
  --md-primary-fg-color--light: #2b3035;
  --md-primary-fg-color--dark:  #0d0f11;
  --md-primary-bg-color:        #f8f9fa;
  --md-primary-bg-color--light: #adb5bd;

  --md-accent-fg-color:         #a64dff;
  --md-accent-fg-color--transparent: rgba(166, 77, 255, 0.16);
}

/* Hairline below the header so the bar separates from the content the
 * way the marketing navbar's border-bottom does. */
.md-header {
  box-shadow: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-md-color-scheme="slate"] .md-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Tabs row picks up the same near-white surface as the header instead
 * of inheriting the brand colour. */
.md-tabs {
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-md-color-scheme="slate"] .md-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.md-tabs__link {
  color: var(--md-primary-bg-color);
  opacity: 0.75;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  color: var(--md-accent-fg-color);
  opacity: 1;
}

/* Active sidebar entry uses the brand colour as a left rail rather
 * than a heavy filled background. */
.md-nav__link--active,
.md-nav__link--active code {
  color: var(--md-accent-fg-color);
  font-weight: 600;
}

/* Body links pick up the brand colour so prose feels of-a-piece with
 * the marketing site's link colour. */
.md-typeset a {
  color: var(--md-accent-fg-color);
}
.md-typeset a:hover {
  color: var(--md-accent-fg-color);
  text-decoration: underline;
}