@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700&display=swap");

:root {
  --md-heading-font: "Bricolage Grotesque", "Source Sans 3", sans-serif;
  --md-text-font: "Source Sans 3", sans-serif;
  --md-code-font: "JetBrains Mono", monospace;

  --c-ink: #14232b;
  --c-teal: #0e6b72;
  --c-teal-deep: #0a4f55;
  --c-amber: #b87300;
  --c-paper: #f6f8f8;
  --c-code-bg: #eaf0f1;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--c-teal);
  --md-primary-fg-color--light: #3f8d93;
  --md-primary-fg-color--dark: var(--c-teal-deep);
  --md-accent-fg-color: var(--c-amber);
  --md-default-bg-color: var(--c-paper);
  --md-typeset-color: var(--c-ink);
  --md-typeset-a-color: var(--c-teal);
  --md-code-bg-color: var(--c-code-bg);
  --md-code-fg-color: #1d3340;
}

[data-md-color-scheme="slate"] {
  --md-hue: 195;
  --md-primary-fg-color: #0c3a40;
  --md-primary-fg-color--light: #1d6068;
  --md-primary-fg-color--dark: #082a2f;
  --md-accent-fg-color: #f2b441;
  --md-default-bg-color: #0f1b20;
  --md-default-fg-color: hsla(195, 15%, 92%, 1);
  --md-typeset-color: #dbe6e8;
  --md-typeset-a-color: #5fc4cc;
  --md-code-bg-color: #172830;
  --md-code-fg-color: #cfe3e6;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--md-heading-font);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--md-typeset-color);
}

.md-typeset h1 { font-size: 2.1em; margin-bottom: 0.8em; }
.md-typeset h2 { border-bottom: 2px solid var(--md-primary-fg-color--light); padding-bottom: 0.2em; }

.md-typeset p,
.md-typeset li,
.md-typeset blockquote {
  max-width: 68ch;
  line-height: 1.7;
}

.md-typeset pre > code,
.md-typeset code {
  font-family: var(--md-code-font);
}

.md-typeset pre > code {
  font-size: 0.82em;
  line-height: 1.55;
}