/* load Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* apply Inter font*/

:root {
  --md-text-font: "Inter";
  --md-code-font: "SF Mono";
}

/* Light mode */
[data-md-color-scheme="default"] {
  --color-brand-orange: #FF6633;
  --color-accent: #BF360C;
  --color-callout-bg: #FEF3E2;
  --color-bg: #FFFFFF;
  --color-surface: #F5F5F5;
  --color-surface-hover: #E9EDF1;
  --color-border: #D9DEE3;
  --color-heading: #3A405A;
  --color-text: #212121;
  --color-text-muted: #627383;
  --color-code-bg: #F0F2F4;

  --md-default-bg-color: var(--color-bg);
  --md-default-fg-color: var(--color-text);
  --md-primary-fg-color: var(--color-bg);
  --md-primary-bg-color: var(--color-heading);
  --md-accent-fg-color: var(--color-accent);
  --md-typeset-a-color: var(--color-accent);
}

/* Dark mode */
[data-md-color-scheme="slate"] {
  --color-brand-orange: #FF6633;
  --color-accent: #FF9933;
  --color-callout-bg: #3A2A14;
  --color-bg: #1E2129;
  --color-surface: #23262F;
  --color-surface-hover: #2C3038;
  --color-border: #3A3F49;
  --color-heading: #E7E9EE;
  --color-text: #EDEEF1;
  --color-text-muted: #9AA4AE;
  --color-code-bg: #282C35;

  --md-default-bg-color: var(--color-bg);
  --md-default-fg-color: var(--color-text);
  --md-primary-fg-color: var(--color-bg);
  --md-primary-bg-color: var(--color-heading);
  --md-accent-fg-color: var(--color-accent);
  --md-typeset-a-color: var(--color-accent);
}

/* force the code font */
.md-typeset code,
.md-typeset pre,
.md-typeset kbd {
  font-family: "SF Mono", Consolas, monospace;
  background-color: var(--color-code-bg);
}

/* Flatten the header and top tabs */

.md-header {
  background-color: var(--color-bg);
  color: var(--color-heading);
  box-shadow: none;
  border-bottom: 1px solid var(--color-border);
}
.md-header__title,
.md-header__topic {
  color: var(--color-heading);
}
.md-header__button.md-icon {
  color: var(--color-heading);
}

.md-tabs {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.md-tabs__link {
  color: var(--color-text-muted);
  opacity: 1;
  font-weight: 600;
}
.md-tabs__link:hover {
  color: var(--color-text);
}
.md-tabs__item--active .md-tabs__link {
  color: var(--color-accent);
}

/* flatten the sidebar */

.md-sidebar--primary .md-nav__link {
  color: var(--color-text-muted);
}
.md-sidebar--primary .md-nav__link:hover,
.md-sidebar--primary .md-nav__link--active {
  background-color: var(--color-surface-hover);
  border-radius: 4px;
  font-weight: 700;
}
.md-nav__title {
  color: var(--color-heading);
}
.md-nav--lifted .md-nav__item--active > .md-nav__link {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* define 4px left-border orange accent on sidebar header */

.md-sidebar--primary .md-nav__item--section > .md-nav__link {
  border-left: 4px solid var(--color-brand-orange);
  background-color: var(--color-surface-hover);
  border-radius: 0 6px 6px 0;
  padding-left: .6rem;
  color: var(--color-heading);
  font-weight: 700;
}

/* applies brand color accent to right-hand table of contents */

.md-nav--secondary .md-nav__link--active {
  color: var(--color-accent);
  font-weight: 700;
}

/* applies brand colors to headings */

.md-typeset h1 {
  color: var(--color-accent);
}
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--color-heading);
}

/* styling for "needs review" warning */

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--color-accent);
  background-color: var(--color-callout-bg);
}
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: transparent;
  color: var(--color-accent);
}
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: var(--color-accent);
}

/* styling for general note callout */

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--color-border);
  background-color: var(--color-surface);
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: transparent;
  color: var(--color-heading);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--color-text-muted);
}

/* apply brand colors to table headers */

.md-typeset table:not([class]) th {
  background-color: var(--color-surface);
  color: var(--color-heading);
}