/* ===== Handpan Chordbook – minimal UI tokens ===== */
:root {
  --hc-primary: #007663; /* your green */
  --hc-on-primary: #ffffff;
  --hc-txt: #1a1a1a;

  --hc-radius: 8px;
  --hc-elev-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

/* ===== Buttons (namespaced) ===== */
.hc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 4px 8px;
  line-height: 1.2;
  font: 400 14px/1.2 "Outfit", Arial, sans-serif; /* uses your site’s loaded font */
  border-radius: var(--hc-radius);
  text-decoration: none;
  color: var(--hc-txt);
  background: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, filter 0.15s ease;
}

/* Filled primary */
.hc-btn--primary {
  background: var(--hc-primary);
  border-color: var(--hc-primary);
  color: var(--hc-on-primary);
  box-shadow: var(--hc-elev-1);
}
.hc-btn--primary:hover {
  filter: brightness(0.95);
}

/* Flat/ghost primary (for your alphabet links) */
.hc-btn--flat {
  background: transparent;
  color: var(--hc-primary);
}
.hc-btn--flat:hover {
  background: color-mix(in srgb, var(--hc-primary) 8%, transparent);
}

/* Active state for flat buttons (selected letter) */
.hc-btn--flat.hc-is-active {
  background: color-mix(in srgb, var(--hc-primary) 12%, white);
  color: var(--hc-primary);
  border-color: color-mix(in srgb, var(--hc-primary) 35%, transparent);
}

/* Focus ring (a11y) */
.hc-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc-primary) 30%, transparent);
}

/* Small spacing helper for your alpha bar */
.alpha-btn {
  margin-right: 0;
}