/* smopt brand styling.
 *
 * Palette: Space berries, the same four colours the logo is built from.
 * The header takes the deep berry, links and hover states take the hot
 * pink, and the orange is kept for the few places that need to stand
 * apart from both. */

:root {
  --smopt-pink: #fd3db5;
  --smopt-pink-light: #ffb8dc;
  --smopt-orange: #fb6a2c;
  --smopt-berry: #8c1946;
}

/* Light scheme -------------------------------------------------------- */

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--smopt-berry);
  --md-primary-fg-color--light: #a8265a;
  --md-primary-fg-color--dark: #6d1236;
  --md-accent-fg-color: var(--smopt-pink);
  --md-typeset-a-color: #b31a6e;
}

/* Dark scheme --------------------------------------------------------- */

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--smopt-berry);
  --md-primary-fg-color--light: #a8265a;
  --md-primary-fg-color--dark: #5c0f2e;
  --md-accent-fg-color: var(--smopt-pink);
  --md-typeset-a-color: var(--smopt-pink);
}

/* The logo is a dark tile, so give it a little breathing room rather
   than letting it butt against the header text. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  border-radius: 4px;
  height: 1.6rem;
  width: 1.6rem;
}

/* Tables carry the API and solver summaries, so make them legible
   rather than decorative. */
.md-typeset table:not([class]) th {
  background-color: var(--smopt-berry);
  color: #ffffff;
  font-weight: 600;
}

.md-typeset table:not([class]) tr:hover {
  background-color: rgba(253, 61, 181, 0.06);
}

/* Inline code reads as a term, not as a warning. */
.md-typeset code {
  border-radius: 3px;
}

/* Admonitions in the brand's orange, which is otherwise unused and so
   still registers as a signal. */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--smopt-orange);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(251, 106, 44, 0.1);
}

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

/* KaTeX blocks are wide; let them scroll instead of stretching the page. */
.md-typeset .arithmatex {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.2rem 0;
}

/* The banner leads the index page. */
.smopt-banner {
  border-radius: 6px;
  display: block;
  margin: 0 auto 1.5rem;
  max-width: 100%;
}