/*
 * Brand colors — see docs/development/design-system.md for the full
 * palette reference and the reasoning behind these specific tokens.
 */

:root {
  --md-primary-fg-color: #1c4fc0;
  --md-primary-fg-color--light: #86a8ef;
  --md-primary-fg-color--dark: #123a91;
}

/*
 * Resting link color comes from --md-typeset-a-color (defaults to
 * primary), not --md-accent-fg-color (that one only drives hover/focus
 * and the active nav-item highlight). Both need scheme-specific values
 * to hit AA contrast on their own background.
 */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #123a91;
  --md-accent-fg-color: #1c4fc0;
}

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #5482e8;
  --md-accent-fg-color: #86a8ef;
  /* A darker, faintly blue-tinted canvas instead of Material's default
     slate — paired with the deep-blue primary above. */
  --md-default-bg-color: #14161d;
}

/*
 * The logo is theme.logo (an <img>, not an inlined icon — see
 * design-system.md), so it can't be recolored with a CSS `fill`. Instead
 * the header swaps in the pre-rendered grey variant for dark mode via
 * `content: url(...)`. Dark mode uses light grey instead of staying blue:
 * the dark canvas already carries a lighter accent blue on links, and a
 * second, different-toned blue on the logo right next to it reads as a
 * mismatch rather than a choice. This keeps the link color as the only
 * blue in dark mode.
 */
[data-md-color-scheme="slate"] .md-logo img {
  content: url("../assets/logo-light.svg");
}

/*
 * Homepage hero wordmark — same light/dark swap approach as the nav logo
 * above, using the transparent header variants (not the -bg ones, which
 * are for opaque contexts like the README/social previews).
 */
.eliferpg-hero {
  display: block;
  max-width: 480px;
  width: 100%;
  height: auto;
  margin: 1.5rem auto;
}

[data-md-color-scheme="slate"] .eliferpg-hero {
  content: url("../assets/logo-header-light.png");
}