/* The dashboard's palette and type on the docs: violet from the lily's
   petals as the brand color, Plex Mono for headings, and the dashboard's
   navy canvas under its violet glow, so the landing page, the dashboard and
   the docs read as one product. */

:root {
  --sg-violet: #b9a0ec;
  --sg-violet-deep: #6a4cc0;
  --sg-green: #9cd47f;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--sg-violet-deep);
  --md-primary-fg-color--light: #8a6fd6;
  --md-primary-fg-color--dark: #52379e;
  --md-accent-fg-color: #7f5cd9;
  --md-accent-fg-color--transparent: rgba(127, 92, 217, 0.1);
  --md-typeset-a-color: var(--sg-violet-deep);
}

[data-md-color-scheme="slate"] {
  --md-hue: 216deg;
  --md-default-bg-color: #0d1117;
  --md-default-bg-color--light: rgba(13, 17, 23, 0.54);
  --md-default-bg-color--lighter: rgba(13, 17, 23, 0.26);
  --md-default-bg-color--lightest: rgba(13, 17, 23, 0.07);
  --md-code-bg-color: #161b22;
  --md-code-bg-color--light: rgba(22, 27, 34, 0.9);
  --md-code-bg-color--lighter: rgba(22, 27, 34, 0.54);
  --md-footer-bg-color: rgba(13, 17, 23, 0.87);
  --md-footer-bg-color--dark: #0a0d12;
  --md-primary-fg-color: var(--sg-violet);
  --md-primary-fg-color--light: #d3c4f5;
  --md-primary-fg-color--dark: #8f73d6;
  --md-primary-bg-color: #0d1117;
  --md-accent-fg-color: #d3c4f5;
  --md-accent-fg-color--transparent: rgba(185, 160, 236, 0.1);
  --md-typeset-a-color: var(--sg-violet);
  --md-code-hl-string-color: var(--sg-green);
}

/* The dashboard's violet and sage wash over the page, fixed like its sky. */
body[data-md-color-scheme="slate"] {
  background:
    radial-gradient(60% 50% at 50% 12%, rgba(167, 139, 250, 0.10), transparent 70%) fixed,
    radial-gradient(45% 40% at 78% 82%, rgba(134, 199, 108, 0.06), transparent 70%) fixed,
    #0d1117;
}

.md-header__title,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: var(--md-code-font-family);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.md-typeset h1 { letter-spacing: -0.035em; }