/* Base styles (uses tokens from tokens.css) */

html {
  scroll-behavior: smooth;
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  background: var(--av-bg, #f7fafc);
}

/* BG21: Diagonal staff-paper grain */
body.bg-texture {
  position: relative;
  z-index: 0;
  background:
    linear-gradient(
      180deg,
      rgba(246, 249, 250, 0.96) 0px,
      rgba(246, 249, 250, 0.94) 140px,
      rgba(246, 249, 250, 0.88) 260px,
      rgba(246, 249, 250, 0.82) 360px,
      rgba(246, 249, 250, 0.74) 460px,
      rgba(246, 249, 250, 0.00) 640px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(15,23,42,0.03) 0px,
      rgba(15,23,42,0.03) 1px,
      transparent 1px,
      transparent 9px,

      rgba(15,23,42,0.03) 9px,
      rgba(15,23,42,0.03) 10px,
      transparent 10px,
      transparent 18px,

      rgba(15,23,42,0.03) 18px,
      rgba(15,23,42,0.03) 19px,
      transparent 19px,
      transparent 27px,

      rgba(15,23,42,0.03) 27px,
      rgba(15,23,42,0.03) 28px,
      transparent 28px,
      transparent 36px,

      rgba(15,23,42,0.03) 36px,
      rgba(15,23,42,0.03) 37px,
      transparent 37px,
      transparent 45px,

      /* Gap between staves */
      transparent 60px
    ),
    var(--av-bg, #f7fafc);
}


/* Keep children naturally above the textured pseudo-element without custom stacking; Bootstrap modal layering stays intact */

.text-muted {
  color: var(--av-muted) !important;
}

* {
  font-family: 'Varela Round', sans-serif;
}

a {
  color: var(--av-accent);
  text-decoration: none;
  transition: color .12s ease, background-color .12s ease, box-shadow .12s ease, transform .12s ease;
  border-radius: var(--av-radius);
}

a:hover {
  color: #2d9aa1;
  text-decoration: underline;
  background-color: transparent;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}

input,
select,
textarea {
  border-radius: var(--av-input-radius);
}

/* Don't apply the pill to nav links / buttons / dropdown items */
.navbar a:hover,
.btn:hover,
.dropdown-item:hover,
.list-group-item a:hover {
}