/* Global tint defaults */
:root {
  --branding-tint-light: rgba(0, 0, 0, 0.02);
  --branding-tint-dark: rgba(255, 255, 255, 0.015);
}

/* Layered background setup */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat, no-repeat;
  background-position: top left, center center;
  background-size: 800px auto, contain;
  opacity: .03;  /* Don't use opacity here; control opacity via SVG or tint */
}

/* Dark theme (slate) */
body[data-md-color-scheme="slate"]::before {
  background-color: var(--branding-tint-dark);
  background-image:
    url("../assets/scribble-dark.svg"),
    url("../assets/elliptic-curve-dark.svg");
}

/* Light theme (solarized) */
body[data-md-color-scheme="solarized"]::before {
  background-color: var(--branding-tint-light);
  background-image:
    url("../assets/scribble-light.svg"),
    url("../assets/elliptic-curve-light.svg");
}


/* Make block code (```...```) backgrounds semi-transparent */
.md-typeset pre > code {
  background-color: rgba(0, 0, 0, 0.5);  /* for dark theme */
}

/* Make inline code (`like this`) transparent too */
.md-typeset code {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Make block code (```...```) backgrounds semi-transparent */
.md-typeset pre > code {
  background-color: rgba(0, 0, 0, 0.5);  /* for dark theme */
}

/* Make inline code (`like this`) transparent too */
.md-typeset code {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Light theme version — use a lighter tint */
body[data-md-color-scheme="slate"] .md-typeset pre > code {
  background-color: rgba(255, 255, 255, 0.0);
}

body[data-md-color-scheme="solarized"] .md-typeset code {
  background-color: rgba(255, 255, 255, 0.0);
}