/* Documentation in the look of the website (website/styles.css): the night
   sky, the ribbon's violet and cyan, Unbounded for headings, Golos Text. */
@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600&family=Unbounded:wght@500;700&display=swap");

:root {
  --fx-sky: #0B1620;
  --fx-sky-raised: #10212E;
  --fx-line: #1F3647;
  --fx-text: #E6EDF3;
  --fx-muted: #9BB0C3;
  --fx-violet: #8B4BFF;
  --fx-violet-hover: #9D66FF;
  --fx-cyan: #00E5FF;
  --md-text-font: "Golos Text";
}

/* the header and the tabs are the site's header in both schemes */
[data-md-color-scheme] {
  --md-primary-fg-color: var(--fx-sky);
  --md-primary-fg-color--light: var(--fx-sky-raised);
  --md-primary-fg-color--dark: var(--fx-sky);
  --md-primary-bg-color: var(--fx-text);
  --md-primary-bg-color--light: var(--fx-muted);
  --md-accent-fg-color: var(--fx-violet);
}

[data-md-color-scheme="slate"] {
  --md-hue: 205;
  --md-default-bg-color: var(--fx-sky);
  --md-default-fg-color: var(--fx-text);
  --md-default-fg-color--light: var(--fx-muted);
  --md-code-bg-color: var(--fx-sky-raised);
  --md-typeset-a-color: var(--fx-cyan);
  --md-accent-fg-color: var(--fx-cyan);
  --md-footer-bg-color: var(--fx-sky);
  --md-footer-bg-color--dark: var(--fx-sky);
}

[data-md-color-scheme="default"] {
  --md-typeset-a-color: #6A2FE0;
}

.md-header, .md-tabs { background-color: var(--fx-sky); }
.md-tabs { border-bottom: 1px solid var(--fx-line); }
.md-header__title, .md-typeset h1, .md-typeset h2 {
  font-family: "Unbounded", "Segoe UI", system-ui, sans-serif;
}
.md-header__title { font-weight: 500; letter-spacing: 0.06em; }
.md-typeset h1 { font-weight: 700; letter-spacing: -0.01em; }
.md-typeset h2 { font-weight: 500; }

/* the starry infinity sign is wide: keep its proportions */
.md-header__button.md-logo img { height: 1.6rem; width: auto; }

.md-typeset h1 { color: var(--md-default-fg-color); }
.md-typeset .md-button { border-color: var(--fx-violet); border-radius: 8px; color: var(--md-default-fg-color); }
.md-typeset .md-button--primary { background-color: var(--fx-violet); color: #fff; }
.md-typeset .md-button:hover { background-color: var(--fx-violet-hover); border-color: var(--fx-violet-hover); color: #fff; }