/*
 * Gin palette for the Material theme.
 *
 * Values are taken from Gin (core's default_admin theme): the "blue" preset
 * accent, the header, surface and sunken backgrounds, and the text grays.
 */

/* Light scheme. */
[data-md-color-scheme="default"] {
  --gin-accent: #015efe;
  --gin-accent-hover: #1256e7;
  --gin-bg-header: #e1eafc;
  --gin-bg-surface: #ffffff;
  --gin-bg-sunken: #e2e5ec;
  --gin-bg-nested: #edeff5;
  --gin-text: #222330;
  --gin-text-soft: #545560;
  --gin-border: #d4d4d8;

  --md-primary-fg-color: var(--gin-bg-header);
  --md-primary-fg-color--light: var(--gin-bg-header);
  --md-primary-fg-color--dark: var(--gin-bg-header);
  --md-primary-bg-color: var(--gin-text);
  --md-primary-bg-color--light: var(--gin-text-soft);
  --md-accent-fg-color: var(--gin-accent-hover);
  --md-accent-fg-color--transparent: rgb(1 94 254 / 10%);
  --md-default-bg-color: var(--gin-bg-surface);
  --md-default-fg-color: var(--gin-text);
  --md-default-fg-color--light: var(--gin-text-soft);
  --md-typeset-color: var(--gin-text);
  --md-typeset-a-color: var(--gin-accent);
  --md-code-bg-color: var(--gin-bg-nested);
  --md-footer-bg-color: var(--gin-text);
  --md-footer-bg-color--dark: #19191b;
}

/* Dark scheme. */
[data-md-color-scheme="slate"] {
  /* Gin lightens the accent in dark mode; these are the resolved values. */
  --gin-accent: #c4d1ff;
  --gin-accent-hover: #c9d5ff;
  --gin-bg-header: #1b1b1d;
  --gin-bg-surface: #2a2a2d;
  --gin-bg-sunken: #19191b;
  --gin-bg-nested: #3b3b3f;
  --gin-text: #d2d3d3;
  --gin-text-soft: #9e9fa0;
  --gin-border: #43454a;

  --md-primary-fg-color: var(--gin-bg-header);
  --md-primary-fg-color--light: var(--gin-bg-header);
  --md-primary-fg-color--dark: var(--gin-bg-header);
  --md-primary-bg-color: var(--gin-text);
  --md-primary-bg-color--light: var(--gin-text-soft);
  --md-accent-fg-color: var(--gin-accent-hover);
  --md-accent-fg-color--transparent: rgb(196 209 255 / 10%);
  --md-default-bg-color: var(--gin-bg-surface);
  --md-default-fg-color: var(--gin-text);
  --md-default-fg-color--light: var(--gin-text-soft);
  --md-typeset-color: var(--gin-text);
  --md-typeset-a-color: var(--gin-accent);
  --md-code-bg-color: var(--gin-bg-nested);
  --md-footer-bg-color: var(--gin-bg-sunken);
  --md-footer-bg-color--dark: #111113;
}

/* Mermaid diagrams: accent boxes, gray lifelines, text colored edges. */
[data-md-color-scheme] {
  --md-mermaid-node-fg-color: var(--gin-accent);
  --md-mermaid-node-bg-color: var(--md-accent-fg-color--transparent);
  --md-mermaid-edge-color: var(--gin-text-soft);
  --md-mermaid-label-fg-color: var(--gin-text);
  --md-mermaid-sequence-actor-line-color: var(--gin-border);
  --md-mermaid-sequence-actorman-line-color: var(--gin-accent);
}

/* Gin's header has a hairline border instead of a shadow. */
.md-header,
.md-header--shadow {
  box-shadow: none;
  border-bottom: 1px solid var(--gin-border);
}

/* The logo is a rounded square; give it a little more room. */
.md-header__button.md-logo img {
  height: 1.8rem;
  border-radius: 0.35rem;
}

/* Active and hovered navigation items use the accent, as in Gin. */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--gin-accent);
  font-weight: 600;
}

/* Gin tables: soft header, hairline borders. */
.md-typeset table:not([class]) {
  border: 1px solid var(--gin-border);
  border-radius: 0.5rem;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  background-color: var(--gin-bg-nested);
  color: var(--gin-text);
}

.md-typeset table:not([class]) td {
  border-top-color: var(--gin-border);
}

.md-typeset code {
  border-radius: 0.25rem;
}

/* Admonitions follow the accent instead of Material's default blue. */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--gin-accent);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: var(--md-accent-fg-color--transparent);
}

.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--gin-accent);
}

/* Search box on the light header. */
[data-md-color-scheme="default"] .md-search__input {
  background-color: rgb(255 255 255 / 70%);
  color: var(--gin-text);
}

[data-md-color-scheme="default"] .md-search__input::placeholder,
[data-md-color-scheme="default"] .md-search__icon {
  color: var(--gin-text-soft);
}