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

[data-md-color-scheme="default"] {
  --md-primary-fg-color:             #16665a;
  --md-primary-fg-color--light:      #1d8072;
  --md-primary-fg-color--dark:       #0f4b42;
  --md-accent-fg-color:              #16665a;
  --md-accent-fg-color--transparent: rgba(22, 102, 90, 0.10);
  --md-typeset-a-color:              #16665a;
  --md-default-bg-color:             #fafaf8;
  --md-code-bg-color:                #f1f1ed;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:             #101319;
  --md-primary-fg-color--light:      #171b23;
  --md-primary-fg-color--dark:       #0b0e13;
  --md-accent-fg-color:              #5fbfa9;
  --md-accent-fg-color--transparent: rgba(95, 191, 169, 0.10);
  --md-typeset-a-color:              #5fbfa9;
  --md-default-bg-color:             #101319;
  --md-default-fg-color:             #e9ebf0;
  --md-default-fg-color--light:      #98a1b4;
  --md-default-fg-color--lighter:    rgba(233, 235, 240, 0.32);
  --md-default-fg-color--lightest:   rgba(233, 235, 240, 0.14);
  --md-code-bg-color:                #171b23;
}

/* The header sits on the dark ground in slate, so it needs a seam. */
[data-md-color-scheme="slate"] .md-header {
  border-bottom: 1px solid rgba(233, 235, 240, 0.14);
}

/* Headings in the display face, tracked in like the main site's. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: "Bricolage Grotesque", var(--md-text-font-family), sans-serif;
  font-weight: 700;
}

.md-typeset h1 { letter-spacing: -0.03em; }
.md-typeset h2 { letter-spacing: -0.025em; }
.md-typeset h3 { letter-spacing: -0.02em; }