/* MEME brand palette, taken from the project's logo kit (docs/assets/logos):
   the icon's gradient runs teal #12B3A6 to blue #2B7FD4, the wordmark sets
   "ME" in navy ink #0C1B24 (light) or white (dark) with the M in teal and the
   E in blue, lifted to #3FD0C8 / #6AA8F0 on dark backgrounds; the caption
   grey is #5B7080 (light) / #8CA1B0 (dark); the banner's background is the
   deep navy #001020. Material's "custom" primary/accent read these variables. */

:root {
  --meme-ink: #0c1b24;
  --meme-ink-light: #16303f;
  --meme-ink-dark: #06111a;
  --meme-teal: #12b3a6;
  --meme-teal-bright: #3fd0c8;
  --meme-blue: #2b7fd4;
  --meme-blue-bright: #6aa8f0;
  --meme-grey: #5b7080;
  --meme-grey-light: #8ca1b0;
}

[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--meme-ink);
  --md-primary-fg-color--light: var(--meme-ink-light);
  --md-primary-fg-color--dark: var(--meme-ink-dark);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--meme-blue);
  --md-accent-fg-color--transparent: #2b7fd41a;
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: #ffffffb3;
}

/* Links carry the brand blue; the dark scheme uses the lifted tint the
   wordmark uses on dark backgrounds. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--meme-blue);
}

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: var(--meme-blue-bright);
  --md-accent-fg-color: var(--meme-blue-bright);
  --md-accent-fg-color--transparent: #6aa8f01a;
  /* The dark scheme leans on the banner's navy instead of Material's grey-blue. */
  --md-default-bg-color: #0c1b24;
  --md-default-bg-color--light: #0c1b24b3;
  --md-default-bg-color--lighter: #0c1b2466;
  --md-default-bg-color--lightest: #0c1b241f;
  --md-code-bg-color: #13262f;
  --md-footer-bg-color: #06111a;
  --md-footer-bg-color--dark: #030a0f;
}

/* Header and tabs are the ink plate in both schemes; the gradient icon reads on it. */
.md-header, .md-tabs {
  background-color: var(--meme-ink);
}

/* A thin rule under the header repeats the icon's teal-to-blue gradient. */
.md-header::after {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--meme-teal), var(--meme-blue));
}

/* Table header rows in the capability matrices. */
.md-typeset table:not([class]) th {
  background-color: #2b7fd41a;
}