/* GenSwarms docs — themed to match the genswarms.com landing.
   Not a solid blue header bar: warm-paper header + ink text + electric-blue
   accent, exactly like the landing's nav. Dark mode echoes the landing night. */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&display=swap");

:root {
  --gs-accent:      #1B4DFF;
  --gs-accent-ink:  #1338cc;
  --gs-accent-soft: #6f8cff;
  --gs-paper:   #FBFBF8;
  --gs-paper-2: #F4F3EE;
  --gs-ink:     #101114;
  --gs-ink-2:   #3b3d44;
  --gs-ink-3:   #6b6e77;
  --gs-line:    #E4E2D9;
  --gs-night:   #0B0C10;
  --gs-night-2: #14161d;
}

/* Interactive accent = electric blue (both schemes) */
[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--gs-accent);
  --md-accent-fg-color--transparent: rgba(27, 77, 255, 0.10);
}

/* ===================== LIGHT ===================== */
[data-md-color-scheme="default"] {
  /* page */
  --md-default-bg-color: var(--gs-paper);
  --md-typeset-a-color:  var(--gs-accent-ink);
  --md-accent-fg-color:  var(--gs-accent);

  /* logo: blue mark on the light header */
  --gs-logo: var(--gs-accent);

  /* header = warm paper with ink text (like the landing nav), not a blue bar */
  --md-primary-fg-color:        var(--gs-paper);
  --md-primary-fg-color--light: var(--gs-paper);
  --md-primary-fg-color--dark:  var(--gs-paper-2);
  --md-primary-bg-color:        var(--gs-ink);
  --md-primary-bg-color--light: var(--gs-ink-2);

  /* dark footer, echoing the landing's footer / CTA band */
  --md-footer-bg-color: var(--gs-ink);
}

[data-md-color-scheme="default"] .md-header {
  border-bottom: 1px solid var(--gs-line);
  box-shadow: none;
}

/* search field stays readable on the light header */
[data-md-color-scheme="default"] .md-search__input {
  background-color: var(--gs-paper-2);
  color: var(--gs-ink);
}
[data-md-color-scheme="default"] .md-search__input::placeholder { color: var(--gs-ink-3); }

/* ===================== DARK ===================== */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--gs-night);
  --md-default-fg-color: rgba(255, 255, 255, 0.88);
  --md-code-bg-color:    var(--gs-night-2);
  --md-typeset-a-color:  var(--gs-accent-soft);
  --md-accent-fg-color:  var(--gs-accent-soft);

  /* logo: white mark on the dark header */
  --gs-logo: #ffffff;

  --md-primary-fg-color: var(--gs-night);
  --md-primary-bg-color: rgba(255, 255, 255, 0.92);

  --md-footer-bg-color: #07080b;
}

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

/* active sidebar item + hovers in brand blue */
.md-nav__link--active,
.md-nav__link:hover,
.md-nav__link:focus { color: var(--md-accent-fg-color); }

/* ===================== TYPE ===================== */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__title,
.md-nav__title {
  font-family: "Bricolage Grotesque", "Instrument Sans", sans-serif;
  letter-spacing: -0.02em;
}
.md-typeset h1 { font-weight: 800; }
.md-typeset h2 { font-weight: 700; }

.md-typeset pre > code { border-radius: 10px; }

/* ===================== LOGO ===================== */
/* Material renders the logo as an <img>, so we can't recolor it directly.
   Mask the same SVG and tint it via --gs-logo so it follows the color scheme:
   white on the dark header, blue on the light one. */
.md-header__button.md-logo img { display: none; }
.md-header__button.md-logo::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--gs-logo);
  -webkit-mask: url("logo.svg") center / contain no-repeat;
          mask: url("logo.svg") center / contain no-repeat;
}